Bind JSON http response to Angular 6 components

Question

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:\Users\893108>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

Answer 1

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

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

and access it using

console.log(this.promotion.promotionOrChallengeCode);

Answer 2

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);
          });
    }