使用AngularJS访问嵌套的JSON
使用AngularJS访问嵌套的JSON
提问于 2013-11-07 07:21:15
我正在尝试用angular.js，hammer.js和topcoat制作和移动网络应用程序。
在显示像这样的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",我的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
});
};我的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>
我想要显示所有的相册，如果我的用户选择了一个特定的艺术家，我想过滤那些相册。这里的问题是如何在这个嵌套的json上进行选择。顺便说一句，artist.name显示正确。
第二个问题是，如何使用文本字段过滤这些艺术家。
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-11-07 08:01:33
我建议这样做：
$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
};
});然后：
<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>Stack Overflow用户
发布于 2013-11-07 17:08:54
所有的问题都是从JSON开始的。我建议您简化JSON，使每个Artist和Album都成为对象，并使Artists和Albums成为对象数组。
试试这个：
{
"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": []
}
]
}在我的例子中，数组可以是空的(artist2没有分配相册)。
您在ListCtrl中的指定也是错误的，在您知道正确的Artist之前，您无法分配和显示相册。如果你想显示所有艺术家的所有专辑，你需要遍历所有艺术家。
示例控制器：
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);
});
});
});
}以下是基于jessie的修改后的Plunkr示例：http://plnkr.co/edit/zkUqrPjlDYhVeNEZY1YR?p=preview
Stack Overflow用户
发布于 2013-11-07 13:53:25
回答你的问题“我将如何选择这个嵌套的json?”
$.each(data.artists, function(index, element){
$.each(this.albums, function(index, element){
$scope.albums.push(element);
});
});回答您的问题“我将如何使用文本字段过滤这些艺术家？”
<input ng-model="searchText.artistName">
<ul ng-repeat="album in albums | filter:searchText">
<li>{{album.title}}</li>
</ul>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19824959
复制相关文章
相似问题
腾讯云开发者
