How to loop through nested JSON data

Question

I am trying to loop through json data bellow, to so each element. I need to get down to the details data and then in side that loop through the f1,f2 into a div. I have tried using the index but that didn't work. Also I don't know how many f1,f2 there will be as it is returned from an api

JSON data

{
 "data":[
 {
   "title": "test",
   "image": "assets/imgs/test.png",
   "date": "22/07/2018 - 19.00",
   "location": "test",
   "details": [
     {
       "f1":[
         {
           "FunctioName": "test",
           "Time": "10:00:00"
         }
       ],
       "f2":[
         {
           "FunctioName": "test",
           "Time": "11:00:00"
         }
       ]
     }
   ]
  }
 ]
}

HTML

<div *ngFor="let item of card">
 <div class="swiper-zoom-container">
  <div class="out-card-box">
   <h2>Date</h2>
   <p>{{item.date}}</p>
   <h2>Program</h2>
   <div *ngFor="let details of item.details; let i = index">
   </div>
  </div>
 </div>
</div>

TS

import { Component } from '@angular/core';
import { App } from 'ionic-angular';
import { DataService } from "../../services/data";
import { LoginPage } from "../login/login";
import { AngularFireAuth } from "angularfire2/auth";
import { Storage } from "@ionic/storage";

@Component({
 selector: 'page-card',
 templateUrl: 'card.html',
})
export class CardPage {

 card:any;
 constructor(private dataservice: DataService, private afAuth:AngularFireAuth, private app:App, private storage:Storage) {

  this.dataservice.cardData().subscribe(
   data => {
    var jsonObj = JSON.parse(data["_body"]);
    this.card = jsonObj.data;
    console.log(jsonObj.data)
  }
 );
}

What have you tried so far? Include the code. See [link](https://stackoverflow.com/help/mcve) — Mike Tung, Jan 15 '18 at 17:14
https://stackoverflow.com/questions/44631886/nested-loops-in-angular-2 — Walter White, Jan 15 '18 at 17:18
what you posted isn't even close to being helpful, either put in the effort and try to show us your code in such a way that we can trace it otherwise don't expect help — Mike Tung, Jan 15 '18 at 17:18
Possible duplicate of [Angular2 - \*ngFor / loop through json object with array](https://stackoverflow.com/questions/43215049/angular2-ngfor-loop-through-json-object-with-array) — Vivek Doshi, Feb 06 '18 at 07:17

score 0 · Answer 1 · answered Jan 16 '18 at 03:52

You can create an object which will hold the returned data from the api and you can just navigate the object values.

Example:

export class Class1 {
    data: Class2[];
}

export class Class2 {
    title: string;
    image: string;
    date: string;
    location: string;
    details: Class3[];
}

export class Class3 {
    f1: Class4[];
    f2: Class4[];
}


export class Class4 {
   FunctioName: string;
   Time: string
}


@Component({
 selector: 'page-card',
 templateUrl: 'card.html',
})
export class CardPage {

 card:Class1;
 constructor(private dataservice: DataService, private afAuth:AngularFireAuth, private app:App, private storage:Storage) {

  this.dataservice.cardData().subscribe(
   data => {
    this.card = data;
  }
 );
}

then in your component template

<div *ngFor="let item of card.data">
 <div class="swiper-zoom-container">
  <div class="out-card-box">
   <h2>Date</h2>
   <p>{{item.date}}</p>
   <h2>Program</h2>
   <div *ngFor="let details of item.details; let i = index">
    <!-- Print the remaining items here  -->
   </div>
  </div>
 </div>
</div>

How to loop through nested JSON data

1 Answers1