scarface13 scarface13 - 1 year ago 58
AngularJS Question

Accesing nested JSON with AngularJS

I'm new to web dev and i'm trying to make and mobile webapp with angular.js, hammer.js and topcoat.

I'm having some trouble on displaying data from a Json file like this one:

"version": "1",
"artists": {
"artist1": {
"name": "artist1name",
"jpeg": "../img/artist/artist1.jpg",
"albums": {
"album1": {
"type": "cd",
"title": "titlealbum1",
"subtitle": "subtitlealbum1",
"jpeg": "../img/album1.jpg",
"price": "12.00",
"anystring1": "anystring1album1",
"anystring2": "anystring2album1"
"album2": [{
"type": "cd",
"title": "titlealbum2",
"subtitle": "subtitlealbum2",
"jpeg": "../img/album2.jpg",
"price": "12.00",
"anystring1": "anystring1album2",
"anystring2": "anystring2album2"
"album3": [{
"type": "cd",
"title": "titlealbum3",
"subtitle": "subtitlealbum3",
"jpeg": "../img/album3.jpg",
"price": "13.00",
"anystring1": "anystring1album3",
"anystring2": "anystring2album3"
"artist2": {
"name": "artist2name",
"jpeg": "../img/artist/artist2.jpg",

My js file is like this:

angular.module('list', [])
function ListCtrl ($scope, $http) {
$http({method: 'GET', url: 'json/json_price_1.json'}).success(function(data)
$scope.artists = data.artists; // response data
$scope.albums = data.artists.albums; /this is where im getting trouble

My HTML file is like this:

<body ng-app="list">


<div ng-controller="ListCtrl">
<ul ng-repeat="artist in artists">
<li >{{}}</li>


<div ng-controller="ListCtrl">
<ul ng-repeat="album in albums">
<li >{{album.title}}</li> //not working here.


I want to display all albums and if my user select an specific artist i want to filter those albums.
The question here is how will i select on this nested json. BTW, the is displaying correctly.

Second question is, how will i filter those artists with a text field.

Answer Source

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.isVisible = function(name){
        return true;// return false to hide this artist's albums

And then:

<div ng-controller="ListCtrl">
        <li ng-repeat="artist in artists">{{}}</li>
    <ul ng-repeat="artist in artists" ng-show="isVisible(">
        <li ng-repeat="album in artist.albums">{{album.title}}</li>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download