*ngFor Nested JSON call In HTML page Angular Ionic

Question

I am using ionic segment and nested JSON.

Now I am using ionic using angular framework.

Version of ionic is 5. Now i am trouble in displaying in html file. both pages are display in below.

{{item.tablist.name}} gives me no data with no 2 ion-card.

data.json

[
    {
      "title": "TravelTime",

      "tablist": [
        {
          "id": 1,
          "name": "TT 1 Average Travel Time",
          "current":54,
          "historicaldata":56,
          "twohr": 27.9,
          "yesterday": 28.9,
          "week": 30,
          "month": 42,
          "quater": 24,
          "Year": 36,
          "percent": 85
        },
        {
          "id": 2,
          "name": "TT 2",
          "current":54,
          "historicaldata":56,
          "twohr": 27.9,
          "yesterday": 28.9,
          "week": 30,
          "month": 42,
          "quater": 24,
          "Year": 36,
          "percent": 85
        }
      ]
    },
    {
      "title": "Speed",
      "tablist": [
        {
          "id": 1,
          "name": "SS 1 ",
          "current":54,
          "historicaldata":56,
          "twohr": 27.9,
          "yesterday": 28.9,
          "week": 30,
          "month": 42,
          "quater": 24,
          "Year": 36,
          "percent": 85
        },
        {
          "id": 1,
          "name": "SS 2 test data",
          "current":54,
          "historicaldata":56,
          "twohr": 27.9,
          "yesterday": 28.9,
          "week": 30,
          "month": 42,
          "quater": 24,
          "Year": 36,
          "percent": 85
    }
  ]
}

]

now html file

<ion-segment color="primary" [(ngModel)]="prit">
  <ion-segment-button  *ngFor="let item of data" value="{{item.title}}">
    {{item.title}}
  </ion-segment-button>
</ion-segment>

<div *ngFor="let item of data" [ngSwitch]="prit">
 <ion-card *ngFor="let item of data" > 
  <ion-list *ngSwitchCase="item.title">
    <ion-item>{{item.tablist.name}}</ion-item>
  </ion-list></ion-card>
</div>

Ts file

import { Component, OnInit } from '@angular/core';

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

  data:any;
  prit:string;
  constructor() {
    this.read_data();
  }
  read_data(){
    fetch('./assets/data.json').then(res => res.json())
    .then(json => {
      this.data = json;
    });
  }

  ngOnInit(){
    this.prit = "1";
  }
}

I use ionicframework website all the code are work only not wordking is calling data from json. please help me on this question

Answer 1

1. First take title . So ngFor use for title.

    <div *ngFor="let item of datas">
        <ion-item>
           {{item.datas}}
        </ion-item>
    </div>
   

2. Second take tablist data. So take ngFor under 1st .

    <div *ngFor="let item of datas">
     <ion-item>
        {{item.datas}}
         <!--take tablist-->
        <ion-card *ngFor="let tablistData of item">
          <li>
              {{tablistData.name}}
          </li>
        </ion-card>
     </ion-item>
   

In second ngFor take item instead of datas.

Answer 2

I don't know how to do in angular but its very simple logic.

first, you create a loop for get the first item which contains two value ex: data[0] = {title: "TravelTime", tablist: Array(2)}

after that, you create another loop for your second array (Tablist)

data[0]["tablist"][0] = return Array(1)

and get the each item value like this:

data[0]["tablist"][0]["id"] = 1

Hope you understand