使用AngularJS访问嵌套的JSON
[英]Accessing nested JSON with AngularJS
问题描述
I'm trying to make and mobile webapp with angular.js, hammer.js and topcoat. 
我正在尝试使用angular.js，hammer.js和topcoat来制作和移动webapp。
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. 这里的问题是如何在这个嵌套的json上选择。 BTW, the artist.name is displaying correctly. 顺便说一句，artist.name正确显示。
Second question is, how will I filter those artists with a text field. 第二个问题是，我将如何使用文本字段过滤这些艺术家。
4 个解决方案
解决方案1
14 已采纳 2013-11-07 00:01:33
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>
解决方案2
7 2013-11-07 09:08:53
All your problems start with your JSON. 您的所有问题都以您的JSON开头。 I recommend you to simplify your JSON and make each Artist and Album an Object and Artists and Albums arrays of objects. 我建议您简化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 . 您在ListCtrl也有错误的对齐，在知道正确的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 这里是基于jessie示例修改的Plunkr： http ：//plnkr.co/edit/zkUqrPjlDYhVeNEZY1YR？p = preview
解决方案3
5 2013-11-07 05:53:25
Check Plunker link 检查Plunker链接
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>
解决方案4
0 2016-09-11 19:24:20
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.