Accessing nested JSON with AngularJS
I suggest something like this:
$http({method: 'GET', url: 'json/json_price_1.json'}).success(function(data) { $scope.artists = []; angular.forEach(data.artists, function(value, key) { $scope.artists.push(value); }); $scope.isVisible = function(name){ return true;// return false to hide this artist's albums };});
And then:
<div ng-controller="ListCtrl"> <ul> <li ng-repeat="artist in artists">{{artist.name}}</li> </ul> <ul ng-repeat="artist in artists" ng-show="isVisible(artist.name)"> <li ng-repeat="album in artist.albums">{{album.title}}</li> </ul></div>
All your problems start with your JSON. I recommend you to simplify your JSON and make each Artist
and Album
an Object and Artists
and Albums
arrays of objects.
Try this one:
{ "version": "1", "artists": [ { "name": "artist1name", "jpeg": "../img/artist/artist1.jpg", "albums": [ { "type": "cd", "title": "titlealbum1", "subtitle": "subtitlealbum1", "jpeg": "../img/album1.jpg", "price": "12.00", "anystring1": "anystring1album1", "anystring2": "anystring2album1" }, { "type": "cd", "title": "titlealbum2", "subtitle": "subtitlealbum2", "jpeg": "../img/album2.jpg", "price": "12.00", "anystring1": "anystring1album2", "anystring2": "anystring2album2" }, { "type": "cd", "title": "titlealbum3", "subtitle": "subtitlealbum3", "jpeg": "../img/album3.jpg", "price": "13.00", "anystring1": "anystring1album3", "anystring2": "anystring2album3" } ] }, { "name": "artist2name", "jpeg": "../img/artist/artist2.jpg", "albums": [] } ]}
An Array can be empty as in my example (artist2 has no album assigned).
You have also wrong asignment in your ListCtrl
, you cannot assign and display albums until you know the correct Artist
. If you want to diplay all albums of all artists, you need to iterate through all artists.
Example controller:
angular.module('list', []);function ListCtrl($scope, $http) { $http({ method: 'GET', url: 'json_price_1.json' }).success(function(data) { $scope.artists = data.artists; // response data $scope.albums = []; angular.forEach(data.artists, function(artist, index) { angular.forEach(artist.albums, function(album, index){ $scope.albums.push(album); }); }); });}
Here is modified Plunkr based on jessie example: http://plnkr.co/edit/zkUqrPjlDYhVeNEZY1YR?p=preview
Check Plunker link
Answer to your question "how will i select on this nested json?"
$.each(data.artists, function(index, element){ $.each(this.albums, function(index, element){ $scope.albums.push(element); });});
Answer to your question "how will i filter those artists with a text field?"
<input ng-model="searchText.artistName"><ul ng-repeat="album in albums | filter:searchText"> <li>{{album.title}}</li></ul>