时间戳

首页 > 解决方案 > 以角度使用 JSON 对象的嵌套数组

javascript - 以角度使用 JSON 对象的嵌套数组

问题描述

我有这样的 JOSN 格式的数据。

[
{
    "name": "The Godfather",
    "image": "https://image.tmdb.org/t/p/w600_and_h900_bestv2/rPdtLWNsZmAtoZl9PK7S2wE3qiS.jpg" ,
    "reviewRating": {
        "votes": [{
            "rating": 9,
            "votes": 159
        }, {
            "rating": 8,
            "votes": 201
        }, {
            "rating": 7,
            "votes": 49
        }, {
            "rating": 6,
            "votes": 69
        }, {
            "rating": 5,
            "votes": 125
        }],
        "total": 603
    }
}]

我在 HTML 文件中尝试了这个。

 <li>
        {{movie.reviewRating}}
</li>

名称和图像加载完美，但是当我尝试加载嵌套对象数组时。这是我得到的输出。

[object Object]

标签： javascriptnode.jsjsonangulartypescript

解决方案

用于*ngFor迭代movie数据。同样reviewRating.votes也是一个数组，您需要再次迭代reviewRating.votes才能正确显示它。

 <ul>
    <li *ngFor="let item of movie">
      {{ item.name }}<br />
      <img [src]="item.image" />

      <ul>
          <li *ngFor="let vote of item.reviewRating.votes">
            {{ vote.rating }} <br />
            {{ vote.votes }}
        </li>
      </ul>
    </li>        
  </ul>

推荐阅读