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

时间:2017-05-20 05:13:57

标签: angularjs arrays json

我无法访问artists数组中的items数组,以便能够呈现name字段:

enter image description here

我目前能够抓住与简单对象艺术家相同级别的其他值。如何遍历嵌套数组的数组?

控制器

$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>

1 个答案:

答案 0 :(得分: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>