Access Denied Access Denied - 1 month ago 12
JSON Question

Read .json in template Ionic 2 and Angular 2

Template cant read *ngFor="let git of user.ball" whats problem ???
how get array ball from json?? I am traing but its not works

my template

<div *ngSwitchCase="'userpage'">
<ion-card>
<ion-card-content>``
<ion-list no-lines>
<ion-item *ngFor="let profile of users">
<ion-avatar item-left>
<img [src]="profile.img">
</ion-avatar>
<h2>{{profile.name}}</h2>
<p>{{profile.about}}</p>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</div>

<!-- Баллы и Достижения -->
<div *ngSwitchCase="'info2'">
<ion-card>
<ion-card-content>
<ion-item *ngFor="let git of user.ball">
<ion-icon name='planet' item-left></ion-icon>
{{git.name}}
<ion-note item-right>
{{git.score}}
</ion-note>
</ion-item>
</ion-card-content>
</ion-card>
</div>
</div>


.json This is my Api user from here i take ball array, but ionic cant read or i have mistake i dont know help pleace!!!

[
{
"id": 1,
"name": "It Developer",
"img": "/assets/img/1_kanal.png",
"email": "example@example.ru",
"surname": "IT app",
"balls": "400",

"ball": [
{
"id": 1,
"name": "Активность",
"score": "100"
},
{
"id": 2,
"name": "Добавления Комментарии",
"score": "150"
},{
"id": 3,
"name": "Репост в Соц Сеть",
"score": "200"
},
{
"id": 4,
"name": "Лайк",
"score": "50"
}
]
}
]

Answer

NOTE : The answer is regarding to this shown object only. answer may vary according to your json.

Let's say

this.users = [
  {
    "id": 1,
    "name": "It Developer",
    "img": "/assets/img/1_kanal.png",
    "email": "example@example.ru",
    "surname": "IT app",
    "balls": "400",

     "ball": [ 
      {
         "id": 1,
         "name": "Активность",
         "score": "100"
      },
      {
         "id": 2,
         "name": "Добавления Комментарии",
         "score": "150"
      },{
         "id": 3,
         "name": "Репост в Соц Сеть",
         "score": "200"
      },
      {
         "id": 4,
         "name": "Лайк",
         "score": "50"
      }
    ]
  }
]

To access ball array, you should do following,

<div *ngFor="let git of users[0].ball">  // user[0] refers to 0th element of users array.
        {{git.id}}-{{git.name}}-{{git.scrore}}
</div>

DEMO: https://plnkr.co/edit/WWbTRASJCuz8UMi18JP7?p=preview