1

In applications where there is an array, and with it another 7 arrays, I can't manage to show it in the template. Can someone please tell me how to get arrays from json?

Thank you all!

channel.json, comming with the name channel:

{
  "version": 3.1,
  "get": true,
  "programms1": [
    {
      "id": 1,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 2,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 3,
      "img": "image.png",
      "name": "name",
      "about": "about"
    }
  ],
  "programms2": [
    {
            "id": 1,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 2,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 3,
      "img": "image.png",
      "name": "name",
      "about": "about"
    }
  ],
  "programms3": [
    {
            "id": 1,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 2,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 3,
      "img": "image.png",
      "name": "name",
      "about": "about"
    }
  ],
  "programms4": [
    {
            "id": 1,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 2,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 3,
      "img": "image.png",
      "name": "name",
      "about": "about"
    }
  ],
  "programms5": [
    {
            "id": 1,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 2,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 3,
      "img": "image.png",
      "name": "name",
      "about": "about"
    }
  ],
  "programms6": [
    {
            "id": 1,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 2,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 3,
      "img": "image.png",
      "name": "name",
      "about": "about"
    }
  ],
  "programms7": [
    {
            "id": 1,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 2,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 3,
      "img": "image.png",
      "name": "name",
      "about": "about"
    }
  ]
}

Ionic template:

<ion-list>
  <ion-item *ngIf="let channel channel.programms7">    
    <ion-icon name="play" item-left large></ion-icon>
    <h2>{{channel.name}}</h2>
    <p>{{channel.about}}</p>
  </ion-item>
<ion-list

Please show me an example of how to print array in template.

Thanks in advance!

Stefan Svrkota
  • 48,787
  • 9
  • 98
  • 87
  • What is the question here? You don't know how to read json file? how to loop it in template or? – Sefa Oct 26 '16 at 08:45
  • yes! i cant read json ;( –  Oct 26 '16 at 08:50
  • You need to make a call to your file. See the answer here http://stackoverflow.com/questions/36749153/how-to-i-load-json-data-into-angular2-component – Sefa Oct 26 '16 at 08:51
  • if you can, get array programms3 and show me an example! thank you –  Oct 26 '16 at 08:56

1 Answers1

0

You can iterate through an array in template using ngFor directive:

<div *ngFor="let j of myJson.programms3">
    {{j.id}}
    {{j.img}}
    {{j.name}}
    {{j.about}}
</div>

Here's working Plunker.

Stefan Svrkota
  • 48,787
  • 9
  • 98
  • 87