使用Angular从嵌套的json数组中获取值答案

【问题标题】：Grabbing value from nested json array with Angular使用Angular从嵌套的json数组中获取值
【发布时间】：2017-05-20 05:13:56
【问题描述】：

我无法在此处访问 items 数组中的 artists 数组以呈现 name 字段：

我目前能够获取与作为简单对象的艺术家相同级别的其他值。如何循环遍历嵌套数组的数组？

控制器

$scope.search = "";
$scope.listLimit = "10";
$scope.selectedSongs = [];
$scope.addItem = function(song){
    $scope.selectedSongs.push(song);
}

function fetch() {
  $http.get("https://api.spotify.com/v1/search?q=" + $scope.search + "&type=track&limit=50")
    .then(function(response) {
      console.log(response.data.tracks.items);
      $scope.isTheDataLoaded = true;
      $scope.details = response.data.tracks.items;
    });
}

模板

<div class="col-md-4">
  <div class="playlist">
    <h3>Top 10 Playlist</h3>
    <ul class="songs" ng-repeat="song in selectedSongs track by $index | limitTo: listLimit">
        <li><b>{{song.name}}</b></li>
        <li>{{song.artists.name}}</li>
        <li contenteditable='true'>Click to add note</li>
        <li contenteditable='true'>Click to add url for image</li>
    </ul>
    <div id="result"></div>
  </div>
</div>

【问题讨论】：

标签： angularjs arrays json

【解决方案1】：

你应该再做一次 ng-repeat 来访问艺术家，

<div class="songs" ng-repeat="song in selectedSongs track by $index | limitTo: listLimit">
<ul ng-repeat="artist in song.artists">
        <li><b>{{song.name}}</b></li>
        <li>{{artist.name}}</li>
        <li contenteditable='true'>Click to add note</li>
        <li contenteditable='true'>Click to add url for image</li>
</ul>
</div>

【讨论】：