How to get arrays from .json Ionic 2 Angular 2

Question

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!

What is the question here? You don't know how to read json file? how to loop it in template or? — Sefa
– Sefa, Commented Oct 26, 2016 at 8:45
You need to make a call to your file. See the answer here stackoverflow.com/questions/36749153/… — Sefa
– Sefa, Commented Oct 26, 2016 at 8:51
if you can, get array programms3 and show me an example! thank you — user6010254
– user6010254, Commented Oct 26, 2016 at 8:56

Stefan Svrkota · Accepted Answer · 2016-10-26 09:54:45Z

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.

answered Oct 26, 2016 at 9:54

Stefan Svrkota

50.8k10 gold badges100 silver badges88 bronze badges

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

Collectives™ on Stack Overflow

How to get arrays from .json Ionic 2 Angular 2

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related