How to fetch data from array of objects in angularJS?

Question

Here is my json-

{
    topalbums: {
      album: [
        {
          name: "The Very Best of Cher",
          playcount: 1634402,
          mbid: "a7e2dad7-e733-4bee-9db1-b31e3183eaf5",
          url: "http://www.last.fm/music/Cher/The+Very+Best+of+Cher",
          artist: {
            name: "Cher",
            mbid: "bfcc6d75-a6a5-4bc6-8282-47aec8531818",
            url: "http://www.last.fm/music/Cher"
          }
        }
      ]
    }
}

how to get data, through looping, artist.name of every upcoming object using angular controller?

Answer 1

try this.in controller you can use angular foreach like this.

var app = angular.module("app",[])
app.controller('ctrl',['$scope', function($scope){
       $scope.data={
         topalbums: {
           album: [
           {
             name: "The Very Best of Cher",
             playcount: 1634402,
             mbid: "a7e2dad7-e733-4bee-9db1-b31e3183eaf5",
             url: "http://www.last.fm/music/Cher/The+Very+Best+of+Cher",
             artist: {
                name: "Cher",
                mbid: "bfcc6d75-a6a5-4bc6-8282-47aec8531818",
                url: "http://www.last.fm/music/Cher"
              }
             },
            {
             name: "The Very Best of Cher",
             playcount: 1634402,
             mbid: "a7e2dad7-e733-4bee-9db1-b31e3183eaf5",
             url: "http://www.last.fm/music/Cher/The+Very+Best+of+Cher",
             artist: {
                name: "Cher2",
                mbid: "bfcc6d75-a6a5-4bc6-8282-47aec8531818",
                url: "http://www.last.fm/music/Cher"
              }
             }
          ]
         }
       };
  
  
  angular.forEach($scope.data.topalbums,function(album){
    angular.forEach(album,function(a){
      alert(a.artist.name);
       console.log(a.artist.name);
      })
    
    })
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="item item-checkbox">
   <div ng-repeat="album in data.topalbums">
         <p ng-repeat="a in album">{{a.artist.name}}</p>
</div>    
</div>

Answer 2

Let's say you have this json in $scope.allAlbums.

You can iterate the artists name of all the albums using

$scope.allAlbums.topalbums.album.forEach(function(item) {

    console.log(item.artist.name)
})

Answer 3

You may try this. names will contain array album names:

var names = data.topalbums.album.map(function(item){
               return item.artist.name;
});