Clash Royale CLAN TAG#URR8PPP

Bind JSON http response to Angular 6 components

I'm getting below JSON response from my HttpClient GET method


shortDescription: "3",
promotionName: "2",
highResolutionImage: "4",
lowResolutionImage: "5",
promotionOrChallengeCode: "aaa"



Promotion.ts

export interface IPromotion


PromotionOrChallengeCode:string;
PromotionName:string;
ShortDescription:string;
HighResolutionImage:string;
LowResolutionImage:string;



In my Component class

promotion:IPromotion;

onSubmit() : void

this.httpClient.get('http://localhost:8080/api/search/'+this.pcode )
.subscribe((response:IPromotion) =>

console.log(response);
this.promotion = response;
console.log(this.promotion.PromotionOrChallengeCode);
);



In the Browser console, I'm able to view the JSON response (Output of first console statement).
And the output of second console statement is displayed as "Undefined"

Let me know how to read JSON data and bind to HTML elements

Below are the current Angular versions I'm using:

C:Users893108>ng -v

_ _ ____ _ ___
/ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ ? | '_ / _` | | | | |/ _` | '__| | | | | | |
/ ___ | | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ __| |_|__, |__,_|_|__,_|_| ____|_____|___|
|___/


Angular CLI: 6.1.2
Node: 8.11.3
OS: win32 ia32
Angular:
...

Package Version
------------------------------------------------------

rxjs 6.2.2

typescript 2.7.2


PromotionOrChallengeCode

promotionOrChallengeCode

2 Answers
2

Change your inteface as your JSON , you can do with JSON2TS

JSON2TS

export interface RootObject
shortDescription: string;
promotionName: string;
highResolutionImage: string;
lowResolutionImage: string;
promotionOrChallengeCode: string;



and access it using

console.log(this.promotion.promotionOrChallengeCode);


The problem is your json interface needs to have same casing as your response from api. Additionally you need to hand the HttpClient in angular the generic signature of your interface.

export interface IPromotion


promotionOrChallengeCode: string;
promotionName: string;
shortDescription: string;
highResolutionImage: string;
lowResolutionImage: string;


promotion:IPromotion;

onSubmit() : void

this.httpClient.get<IPromotion>('http://localhost:8080/api/search/'+this.pcode )
.subscribe((response:IPromotion) =>

console.log(response);
this.promotion = response;
console.log(this.promotion.promotionOrChallengeCode);
);



By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.