使用 AngularJS 访问嵌套的 JSON
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19824959/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accessing nested JSON with AngularJS
提问by scarface13
I'm trying to make and mobile webapp with angular.js, hammer.js and topcoat.
我正在尝试使用 angular.js、hammer.js 和面漆制作和移动 web 应用程序。
I'm having some trouble on displaying data from a Json file like this one:
我在显示来自这样的 Json 文件的数据时遇到了一些麻烦：
{
"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:
我的js文件是这样的：
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:
我的 HTML 文件是这样的：
<body ng-app="list">
<h3>Titulos</h3>
<div ng-controller="ListCtrl">
<ul ng-repeat="artist in artists">
<li >{{artist.name}}</li>
</ul>
</div>
<div ng-controller="ListCtrl">
<ul ng-repeat="album in albums">
<li >{{album.title}}</li> //not working here.
</ul>
</div>
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 artist.name is displaying correctly.
我想显示所有专辑，如果我的用户选择了一个特定的艺术家，我想过滤这些专辑。这里的问题是我将如何选择这个嵌套的 json。顺便说一句，artist.name 显示正确。
Second question is, how will I filter those artists with a text field.
第二个问题是，我将如何使用文本字段过滤这些艺术家。
采纳答案by Adam
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>
回答by ivoszz
All your problems start with your JSON. I recommend you to simplify your JSON and make each Artistand Albuman Object and Artistsand Albumsarrays of objects.
您所有的问题都始于您的 JSON。我建议你简化你的JSON，让每个Artist和Album对象和Artists与Albums对象的数组。
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).
在我的示例中，数组可以为空（artist2 没有分配专辑）。
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.
您也有错误的ListCtrl分配，除非您知道正确，否则无法分配和显示相册Artist。如果要显示所有艺术家的所有专辑，则需要遍历所有艺术家。
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
这是基于 jessie 示例的修改后的 Plunkr：http://plnkr.co/edit/zkUqrPjlDYhVeNEZY1YR?p=preview
回答by jessie
Check Plunker link
Answer to your question "how will i select on this nested json?"
回答你的问题“我将如何选择这个嵌套的 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>
回答by Noredine Bahri
<ul ng-repeat="artist in artists">
<li>
<p>{{artist.name}}</p>
<ul ng-repeat="(key,val) in artist.albums">
<li>{{key}} - {{val}}</li>
</ul>
</li>
</ul>
