How to fetch json object dynamically in angular 4

Question

Here is my Json, I will try to fetch Set1 and Set2 dynamically

{
  "ForumDetails":
    [{
      "SetNames":
          [
            {
             "Set1":[{
                     "UseName": "David",
                     "MobileNumber": "815642147"
                     }]
            },
            {
             "Set2":[{
                       "UseName": "David",
                        "MobileNumber": "815642147"
                    }]
            }
         ] 
    }]
}

Here is my html code currently am fetching manually, but i want Set1 and its key:value dynamically

<div *ngFor="let item of ForumDetails">
   <table *ngFor="let value of item['SetNames']">
      <tr *ngFor="let set of value.Set1">
      <td>   {{set.UserName}} <td>
      </tr>
   </table>
</div>

score 0 · Answer 1 · answered Jan 31 '18 at 06:04

Use http.get (url)

If you're looking for an example, you can checkout my basic web (which fetches list of videos from youtube channel, and uses json response just like yours) with source code below:

HTML:

<div class="container">

  <div class="card bg-dark text-white" width="330" height="190">
    <img class="card-img-top" [src]="item" (click)="loadVideo(i)" width="320" height="180" />
  </div>

</div>

.TS

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Http, Headers, RequestOptions } from '@angular/http';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

variable1 = 'https://www.youtube.com/embed/';
autoplay = '?autoplay=1';

videos = [];
thumbnails = [];
titles = [];

constructor(private http: HttpClient, private sanitizer: DomSanitizer) {

}

transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}

ngOnInit() {
    const url = 'https://www.googleapis.com/youtube/v3/search' +
        '?key=AIzaSyCXNofX9tlp5FKqWOw6cHrIOhYPAlsZOdw&channelId=UCRUcBt1POKGAe8Og1PQIZig&part=snippet,id&order=date&maxResults=20';
    this.http.get(url)
        .subscribe(r => {
            console.log('@@@@@@@@@@@@@@');
            console.log(r);
            // const json = JSON.parse(r.toString());
            // this.videos = this.videos.items[0].id.videoId;

            const items = r['items'];
            if (items != null) {
                for (let i = 0; i < items.length; i++) {
                    this.videos[i] = this.variable1 + items[i].id.videoId + this.autoplay;
                    this.thumbnails[i] = this.transform(items[i].snippet.thumbnails.medium.url);
                    this.titles[i] = items[i].snippet.title;
                }
            }
            console.log('************************');
            console.log(this.videos);
            // this.videos = r['items'];
        });
}

loadVideo(index) {
    document.getElementsByClassName('video-thumbnail-container')[index].innerHTML = '<iframe width="330" height="175" src=' + this.videos[0] + '  frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen (click)="loadVideo($arg)"></iframe>';
    console.log(index);
    console.log('******');
}

}

How to fetch json object dynamically in angular 4

Here is my Json, I will try to fetch Set1 and Set2 dynamically

Here is my html code currently am fetching manually, but i want Set1 and its key:value dynamically

1 Answers1