Как получить доступ к элементам из массива

Question

Я хочу отобразить имя и photoUrl в шаблоне HTML приложения Angular 6, как мне получить доступ к элементам name и photoUrl только в массиве ниже:

{
   "key":"key0",
   "value":[
      {
     "id":567657,
     "name":"Jess",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
     "rating":30
  },
  {
     "id":3243242,
     "name":"Ryan",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/male-29.jpg",
     "rating":5
  }
   ]
}

{  
   "key":"key1",
   "value":[  
  {  
     "id":567657,
     "name":"Jess",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
     "rating":30
  },
  {  
     "id":6757587,
     "name":"Sarah",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-70.jpg",
     "rating":16
  }
   ]
}

Answer 1

Ваш JSON недействителен, однако я внес несколько изменений

[{ "ключ": "ключ0", "значение": [ { "id": 567657, "имя": "Джесс", "photoUrl": "https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg", "рейтинг": 30 }, { «id»: 3243242, "имя": "Райан", "photoUrl": "https://d3iw72m71ie81c.cloudfront.net/male-29.jpg", "рейтинг": 5 } ]}, { «ключ»: «ключ1», "значение": [ { "id": 567657, "имя": "Джесс", "photoUrl": "https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg", "рейтинг": 30 }, { "id": 6757587, "имя": "Сара", "photoUrl": "https://d3iw72m71ie81c.cloudfront.net/female-70.jpg", "рейтинг": 16 } ]}]

и вам просто нужно вложенное ngFor следующим образом:

<ul>
    <li *ngFor="let group of myArray">
    {{group.name}}
    <ul>
        <li *ngFor="let light of group.value">
            <h1>Photo </h1>  {{light.photoUrl}}
            <h1>Name </h1>    {{light.name}}
        </li>
    </ul>
    </li>
</ul>

STACKBLITZ DEMO

Answer 2

component.ts

user_Array = [
 {
   "key":"key0",
   "value":[
      {
     "id":567657,
     "name":"Jess",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
     "rating":30
  },
  {
     "id":3243242,
     "name":"Ryan",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/male-29.jpg",
     "rating":5
  }
   ]
}.
{  
   "key":"key1",
   "value":[  
  {  
     "id":567657,
     "name":"Jess",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
     "rating":30
  },
  {  
     "id":6757587,
     "name":"Sarah",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-70.jpg",
     "rating":16
  }
   ]
 }
]

component.html

 <div *ngFor="let user of user_Array">
     <span>{{user?.name}}</span>
     <img src="{{user?.photoUrl}}">

    <div>

комментарий добавляя '?' HTML-файл не будет генерировать ошибку, если эта конкретная переменная отсутствует. всегда безопасно добавлять "?" при обращении к переменной ts

Answer 3

Вы можете использовать директиву *ngFor, предоставленную Angular

.component.html

<div *ngFor="let user of users">
 <div *ngFor="let value of values;i = index">
  <div>{{value.name}}</div>
  <div>{{value.photoUrl}}</div>
 </div>
<div>

.component.ts

users = [
 {
   "key":"key0",
   "value":[
      {
     "id":567657,
     "name":"Jess",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
     "rating":30
  },
  {
     "id":3243242,
     "name":"Ryan",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/male-29.jpg",
     "rating":5
  }
   ]
}.
{  
   "key":"key1",
   "value":[  
  {  
     "id":567657,
     "name":"Jess",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
     "rating":30
  },
  {  
     "id":6757587,
     "name":"Sarah",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-70.jpg",
     "rating":16
  }
   ]
 }
]