[closed] Ion-list not work with 2 kind of object Json

Ionic Framework ionic-v3
1

This is my JSON file…

[
  {
    "title": "Erreichbarkeit",
    "items": [
      {
        "name": "1",
        "value": "a"
      },
      {
        "name": "2",
        "value": "b"
      },
      {
        "name": "3",
        "value": "c"
      }
    ]
  },
  {
    "title": "Erreichbarkeit 2",
    "items": [
      {
        "name": "1",
        "value": "g"
      },
      {
        "name": "2",
        "value": "f"
      },
      {
        "name": "3",
        "value": "e"
      }
    ]
  }
]

this this my view.html - “this work”

 <ion-list *ngFor="let data of posts">
    <ion-item>
      <ion-label> {{data.title}} </ion-label>
    </ion-item>
  </ion-list>

but this one not work

  <ion-list *ngFor="let data of posts.items">
    <ion-item>
      <ion-label> {{data.name}} | {{data.value}} </ion-label>
    </ion-item>
  </ion-list>
2

Something seems to have gotten messed up in the code formatting, because {{data.name}} and {{data.value}} aren’t inside the code block, so we can’t see how you are intending to use them in the template.

3

sorry i lost copy last code.

4

Please post how posts is populated. I suspect it is coming from an asynchronous source like an http request, in which case your best course of action is to prepopulate it in your page’s constructor to something like posts = {items: []}.

5

i try this… but nothing happens;

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


@Component({
  selector: 'agenda',
  templateUrl: 'agenda.html'
})

export class agenda {
  tudo: void;
  lista: any[];
    constructor() {

      this.tudo = this.getList();
      console.log(this.lista);
    }
    getList() {
      this.lista = [
  {
    "title": "Erreichbarkeit",
    "items": [
      {
        "name": "1",
        "value": "a"
      },
      {
        "name": "2",
        "value": "b"
      },
      {
        "name": "3",
        "value": "c"
      }
    ]
  },
  {
    "title": "Erreichbarkeit 2",
    "items": [
      {
        "name": "1",
        "value": "g"
      },
      {
        "name": "2",
        "value": "f"
      },
      {
        "name": "3",
        "value": "e"
      }
    ]
  }
]
    }
}
6

@spigatl Try this:

<ion-list>
  <ion-item-group *ngFor="let data of posts">
    <ion-item-divider>{{ data.title }}</ion-item-divider>
    
    <ion-item *ngFor="let item of data.items">
      <ion-label>{{ item.name }} | {{ item.value }}</ion-label>
    </ion-item>
  </ion-item-group>
</ion-list>
2 Likes