How to get response (array of json) and put it in my html component in Angular 4

Question

I am trying to get the array data in a JSON response. The following is my JSON response and I need to get all data to my html tags in component.

   {
  data : {
  "topLikedMedia" : [

  {
    "id": "1546567845943506613_3718981156",
    "type": "image",
    "user": {
      "id": "3718981156",
      "username": "agoramonitor",
      "full_name": "AgoraMonitor",
      "profile_picture": "https://scontent.cdninstagram.com/t51.2885-19/s150x150/18809269_476795959342067_7353566623065702400_n.jpg"
    },
    "tags": [
      "instagramers",
      "content",
      "socialmedia",
      "marketing",
      "branding",
      "instagram"
    ],
    "location": null,
    "comments": {
      "count": 2
    },
    "formatted_comments_count": "2",
    "created_time": "1498585275",
    "formatted_time": "Tue, Jun 27, 2017 7:41 PM",
    "diff_humans_time": "4 months ago",
    "link": "https://www.instagram.com/p/BV2g0MGgPa1/",
    "likes": {
      "count": 154
    },
    "formatted_likes_count": "154",
    "images": {
      "thumbnail": {
        "width": 150,
        "height": 150,
        "url": "https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c244.0.591.591/19533988_862713503881059_8677706625265434624_n.jpg"
      },
      "low_resolution": {
        "width": 320,
        "height": 175,
        "url": "https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/19533988_862713503881059_8677706625265434624_n.jpg"
      },
      "standard_resolution": {
        "width": 640,
        "height": 350,
        "url": "https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/19533988_862713503881059_8677706625265434624_n.jpg"
      }
    },
    "caption": "Whether you want to drive leads to your homepage or encourage customer engagement ",
    "userHasLiked": false,
    "filter": "Normal"
  }

],

}

I have the temp of this output and I need to receive this response and distribute it on its own tags and i dont know how

Answer 1

First solution, the Angular way :

getTopLiked() { 
  this._dashboardService.getTopPosts()
    .subscribe(res => { 
      // Get your data in your component's variable
      this.data = res.json();
    });
}

In your HTML

<div *ngIf="data">
  <div *ngFor="let liked of data.topLikedMedia">
    <p>ID : {{liked.id}}</p>
    <!-- And you do every other field like that -->
  </div>
</div>

Second solution, the old Javascript way

getTopLiked() { 
  this._dashboardService.getTopPosts()
    .subscribe(res => { 
      this.createMarkup(res.json());
    });
}

createMarkup(data: Object) {
  this.markup = '';
  for (let liked of data.topLikedMedia) {
    this.markup += `<p>ID : ${liked.id}</p>`;
    // add the other fields like that
  }
}

In your HTML

<div *ngIf="markup">
  <div [innerHTML]="markup"></div>
</div>