CODEWITHSUNDEEP
angularjsarraysjson
Matt
Matt

Reputation: 1609

Grabbing value from nested json array with Angular

I'm having trouble accessing the artists array within the items array here to be able to render the name field:

enter image description here

I'm currently able to grab other values at the same level as the artists that are simple objects. How can I loop through the array of the nested array?

Controller

$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;
    });
}

Template

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

Upvotes: 0

Views: 442

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222722

You should do another ng-repeat to access the artists,

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

Upvotes: 1

Related Questions