使用 AngularJS 访问嵌套的 JSON [英] Accessing nested JSON with AngularJS
问题描述
我正在尝试使用 angular.js、hammer.js 和 topcoat 制作移动网络应用程序.
我在显示来自这样的 Json 文件的数据时遇到了一些问题:
<代码>{"版本": "1",艺术家":{艺术家1":{"name": "artist1name","jpeg": "../img/artist/artist1.jpg",专辑":{专辑 1":{类型":CD"，"title": "titlealbum1","subtitle": "subtitlealbum1","jpeg": "../img/album1.jpg","价格": "12.00","anystring1": "anystring1album1","anystring2": "anystring2album1"},专辑2":[{类型":CD"，"title": "titlealbum2","subtitle": "subtitlealbum2","jpeg": "../img/album2.jpg","价格": "12.00","anystring1": "anystring1album2","anystring2": "anystring2album2"}],专辑 3":[{类型":CD"，"title": "titlealbum3","subtitle": "subtitlealbum3","jpeg": "../img/album3.jpg","价格": "13.00","anystring1": "anystring1album3","anystring2": "anystring2album3"}]}},艺术家2":{"name": "artist2name","jpeg": "../img/artist/artist2.jpg",我的js文件是这样的:
angular.module('list', [])函数 ListCtrl ($scope, $http) {$http({method: 'GET', url: 'json/json_price_1.json'}).success(function(data){$scope.artists = data.artists;//响应数据$scope.albums = data.artists.albums;/这就是我遇到麻烦的地方});};我的 HTML 文件是这样的:
<h3>Titulos</h3><div ng-controller="ListCtrl"><ul ng-repeat="艺术家中的艺术家"><li >{{artist.name}}</li><div ng-controller="ListCtrl"><ul ng-repeat="专辑中的专辑"><li >{{album.title}}</li>//这里不工作.
我想显示所有专辑，如果我的用户选择特定艺术家，我想过滤这些专辑.这里的问题是我将如何选择这个嵌套的 json.顺便说一句，artist.name 显示正确.
第二个问题是，我将如何使用文本字段过滤那些艺术家.
我建议如下:
$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 = 函数(名称){return true;//return false 隐藏该艺术家的专辑};});然后:
<ul><li ng-repeat="艺术家中的艺术家">{{artist.name}}</li><ul ng-repeat="艺术家中的艺术家" ng-show="isVisible(artist.name)"><li ng-repeat="artist.albums 中的专辑">{{album.title}}</li>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">
<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.
Second question is, how will I filter those artists with a text field.
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>
这篇关于使用 AngularJS 访问嵌套的 JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
