How to use value of only "memes" key instead of others from my API call using Angular?-CodePudding

Below is My Json Data after calling the API "https://api.imgflip.com/get_memes"

I am new to Angular , I don't know how to use some specific information from response of an API like here , I am calling the API and I got result as below . But I don't know how to display this in html file of component in Angular. So can anyone help to fullfill this?

{
      "success": true,
      "data": {
        **"memes": [
          {
            "id": "181913649",
            "name": "Drake Hotline Bling",
            "url": "https://i.imgflip.com/30b1gx.jpg",
            "width": 1200,
            "height": 1200,
            "box_count": 2
          },
          {
            "id": "87743020",
            "name": "Two Buttons",
            "url": "https://i.imgflip.com/1g8my4.jpg",
            "width": 600,
            "height": 908,
            "box_count": 3
          },
          {
            "id": "1121
              
              .
              .
    }**
    }
  }


I want to handle only memes array from this result. How can i do this Using Angular ???

CodePudding user response：

You can store the memes array to a variable and use *ngFor in HTML File to display contents in HTML

TS File:

memes : any = [];
.
.
.
memes = response.data.memes;
.
.

CodePudding user response：

Save http request in a variable and subscribe to it directly from view, using async pipe

Check an example