*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

Please also share your component's code. How you load the json etc. — Eldar
– Eldar, Commented Jul 1, 2020 at 6:23

Pritesh Bhoi · Accepted Answer · 2020-07-01 14:30:59Z

1

First take title . So ngFor use for title.

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

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.

answered Jul 1, 2020 at 14:30

Pritesh Bhoi

1,0964 gold badges16 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

keerti Sawlani · Accepted Answer · 2020-07-01 07:36:30Z

0

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

edited Jul 1, 2020 at 7:36

answered Jul 1, 2020 at 6:38

keerti Sawlani

2331 silver badge9 bronze badges

Collectives™ on Stack Overflow

*ngFor Nested JSON call In HTML page Angular Ionic

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related