- 首页
- 前端开发
- 使用 ng-repeat 从 2 个不同的 JSON 文件中提取数据
使用 ng-repeat 从 2 个不同的 JSON 文件中提取数据
[英] Using ng-repeat to pull data from 2 different JSON files
本文介绍了使用 ng-repeat 从 2 个不同的 JSON 文件中提取数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我没有收到错误，但无法渲染我的数据.我的结构很简单，json 文件在一个文件夹中，视图在另一个文件夹中，脚本/控制器在另一个文件夹中.只需使用控制器来完成工作，因为它是一个简单的小部件.关于可能导致此失败的任何想法，因为我没有收到错误并且我相信我的映射是正确的.
我的代码:
在此处更新视图:
<div class="col-md-5 propDtl" style="padding: 10px; display: block;"ng-repeat="项目中的项目"><div class="listImg" style="float: left;"><img src="http://placehold.it/200x200" style="display: block;">
<div class="propTxt" style="margin-left: 220px; padding: 10px 0px 10px 0px;"><p style="font-size: 22px; color: blue;">{{ item.address }}</p><p style="font-size: 22px; color: blue;">{{ item.address }}</p><p style="font-size: 26px; color: black;">{{ item.cost }}</p><ul><li>{{ item.beds }}</li><li>{{ item.baths }}</li>
{{ item.sq_ft }} 原始视图:
<h2>很棒的列表小部件</h2><div class="listingsFilter"><a href="" class="btn btn-md btn-primary">价格</a><a href="" class="btn btn-md btn-warning">床</a><a href="" class="btn btn-md btn-success">Sq.英尺
<div class="properties col-md-12" style="margin-top: 10px;"><div class="col-md-5 propDtl" style="padding: 10px; display: block;"ng-repeat="项目中的项目"><div class="listImg" style="float: left;"><img src="http://placehold.it/200x200" style="display: block;">
<div class="propTxt" style="margin-left: 220px; padding: 10px 0px 10px 0px;"><p style="font-size: 22px; color: blue;">{{ item.value.address }}</p><p style="font-size: 22px; color: blue;">{{ item.value.address }}</p><p style="font-size: 26px; color: black;">{{ item.value.cost }}</p><ul><li>{{ item.value.beds }}</li><li>{{ item.value.baths }}</li>
{{ item.value.sq_ft }} 我的控制器:
'use strict';angular.module('zillowTestApp').controller('MainCtrl', ['$scope', '$http', '$filter',函数($scope，$http，$filter){$scope.items = [];$http.get('#/batmanReality.json').then(function(response){angular.forEach(response.data.__BATMAN_DATA__, function(value,key){$scope.items.push({地址:钥匙，成本:价值.成本，床位:value.beds，浴池:value.baths，sq_ft: value.sq_ft});})});$http.get('#/supermanReality.json').then(function(response){angular.forEach(response.data.__SUPERMAN_DATA__, function(value,key){$scope.items.push({地址:value.address，价格:价值.成本，床位:value.beds，浴池:value.baths，sq_ft: value.sq_ft});})});}]);
以及 2 个 JSON 文件及其对象和属性.
window.__BATMAN_DATA__ = {1806 E.韦恩巷，道奇堡，IA 50501":{"成本": "849,950","床": "5","浴": "3","sq_ft": "4050","img": "http://stevensegallery.com/200/200","url": "http://trulia.com"},1774 Kapow Drive, Hyattsville, MD 20782":{"成本": "419,950","床": "3","浴": "2","sq_ft": "1700","img": "http://stevensegallery.com/200/200","url": "http://trulia.com"},"773 Duhnuhnuhna Street, Essex, MD 21221": {"成本": "524,999","床": "3","浴": "2","sq_ft": "1980","img": "http://stevensegallery.com/200/200","url": "http://trulia.com"},178 Pennyworth Avenue, Depew, NY 14043":{"成本": "619,999","床": "4","浴": "1.5","sq_ft": "2100","img": "http://stevensegallery.com/200/200","url": "http://trulia.com"}};
和:
window.__SUPERMAN_DATA__ = {项目": [{"address": "7791 Luther Way, Knoxville, TN 37918","价格": "549999","床": "3","浴": "2.5","平方英尺": "3000","建造": "1976","thumb": "http://fillmurray.com/150/150","url": "http://zillow.com"},{"address": "1774 Kapow Drive, Hyattsville, MD 20782","价格": "419950","床": "3","浴": "2","平方英尺": "1700","建造": "2001","thumb": "http://stevensegallery.com/200/200","url": "http://zillow.com"},{"address": "3121 5th Street, Gotham, NY 27520","价格": "280000","床": "2","浴": "1","平方英尺": "","建造": "1948","thumb": "http://fillmurray.com/150/150","url": "http://zillow.com"},{"address": "178 Pennyworth Avenue, Depew, NY 14043","价格": "619999","床": "4","浴": "1.5","平方英尺": "2100","建造": "2014","thumb": "http://stevensegallery.com/200/200","url": "http://zillow.com"}]};
如您所见，我将 ng-repeat 引用为item in items"，并将 http.get 结构化为以这种方式抓取对象.请问有什么想法吗?
解决方案
请检查您的 JSON.认为 JSON 无效.
BatmanReality.json
{蝙蝠侠":{1806 E.韦恩巷，道奇堡，IA 50501":{"成本": "849,950","床": "5","浴": "3","sq_ft": "4050","img": "http://stevensegallery.com/200/200","url": "http://trulia.com"},1774 Kapow Drive, Hyattsville, MD 20782":{"成本": "419,950","床": "3","浴": "2","sq_ft": "1700","img": "http://stevensegallery.com/200/200","url": "http://trulia.com"},"773 Duhnuhnuhna Street, Essex, MD 21221": {"成本": "524,999","床": "3","浴": "2","sq_ft": "1980","img": "http://stevensegallery.com/200/200","url": "http://trulia.com"},178 Pennyworth Avenue, Depew, NY 14043":{"成本": "619,999","床": "4","浴": "1.5","sq_ft": "2100","img": "http://stevensegallery.com/200/200","url": "http://trulia.com"}}}
supermanReality.json
{"超人" : {项目": [{"address": "7791 Luther Way, Knoxville, TN 37918","价格": "549999","床": "3","浴": "2.5","平方英尺": "3000","建造": "1976","thumb": "http://fillmurray.com/150/150","url": "http://zillow.com"},{"address": "1774 Kapow Drive, Hyattsville, MD 20782","价格": "419950","床": "3","浴": "2","平方英尺": "1700","建造": "2001","thumb": "http://stevensegallery.com/200/200","url": "http://zillow.com"},{"address": "3121 5th Street, Gotham, NY 27520","价格": "280000","床": "2","浴": "1","平方英尺": "","建造": "1948","thumb": "http://fillmurray.com/150/150","url": "http://zillow.com"},{"address": "178 Pennyworth Avenue, Depew, NY 14043","价格": "619999","床": "4","浴": "1.5","平方英尺": "2100","建造": "2014","thumb": "http://stevensegallery.com/200/200","url": "http://zillow.com"}]}}
和
html:
<div class="properties col-md-12" style="margin-top: 10px;"><div class="col-md-5 propDtl" style="padding: 10px; display: block;"ng-repeat="项目中的项目"><div class="listImg" style="float: left;"><img src="http://placehold.it/200x200" style="display: block;"><div class="propTxt" style="margin-left: 220px; padding: 10px 0px 10px 0px;"><p style="font-size: 22px; color: blue;">{{ item.address }}</p><p style="font-size: 22px; color: blue;">{{ item.address }}</p><p style="font-size: 26px; color: black;">{{ item.cost }}</p><ul><li>{{ item.beds }}</li><li>{{ item.baths }}</li>
{{ item.sq_ft }}
I am not getting an errors, but cannot get my data to render. My structure is simple in that json files in one folder, views in another, scripts/controllers in another. Simply using the controller to do the work since it is a straight forward widget. Any ideas on what may be causing this to fail as I am not getting errors and I believe my mapping is correct.
My code:
updated view here:
<div class="col-md-5 propDtl" style="padding: 10px; display: block;" ng-repeat="item in items">
<div class="listImg" style="float: left;">
<img src="http://placehold.it/200x200" style="display: block;">
</div>
<div class="propTxt" style="margin-left: 220px; padding: 10px 0px 10px 0px;">
<p style="font-size: 22px; color: blue;">{{ item.address }}</p>
<p style="font-size: 22px; color: blue;">{{ item.address }}</p>
<p style="font-size: 26px; color: black;">{{ item.cost }}</p>
<ul>
<li>{{ item.beds }}</li>
<li>{{ item.baths }}</li>
<li>{{ item.sq_ft }}</li>
</ul>
</div>
</div>
original view:
<div class="container" ng-controller="MainCtrl">
<h2>Awesome Listings Widget</h2>
<div class="listingsFilter">
<a href="" class="btn btn-md btn-primary">Price</a>
<a href="" class="btn btn-md btn-warning">Beds</a>
<a href="" class="btn btn-md btn-success">Sq. ft.</a>
</div>
<div class="properties col-md-12" style="margin-top: 10px;">
<div class="col-md-5 propDtl" style="padding: 10px; display: block;" ng-repeat="item in items">
<div class="listImg" style="float: left;">
<img src="http://placehold.it/200x200" style="display: block;">
</div>
<div class="propTxt" style="margin-left: 220px; padding: 10px 0px 10px 0px;">
<p style="font-size: 22px; color: blue;">{{ item.value.address }}</p>
<p style="font-size: 22px; color: blue;">{{ item.value.address }}</p>
<p style="font-size: 26px; color: black;">{{ item.value.cost }}</p>
<ul>
<li>{{ item.value.beds }}</li>
<li>{{ item.value.baths }}</li>
<li>{{ item.value.sq_ft }}</li>
</ul>
</div>
</div>
</div>
</div>
my controller:
'use strict';
angular.module('zillowTestApp')
.controller('MainCtrl', ['$scope', '$http', '$filter',
function ($scope, $http, $filter) {
$scope.items = [];
$http.get('#/batmanReality.json').then(function(response){
angular.forEach(response.data.__BATMAN_DATA__, function(value,key){
$scope.items.push({
address: key,
cost: value.cost,
beds: value.beds,
baths: value.baths,
sq_ft: value.sq_ft
});
})
});
$http.get('#/supermanReality.json').then(function(response){
angular.forEach(response.data.__SUPERMAN_DATA__, function(value,key){
$scope.items.push({
address: value.address,
price: value.cost,
beds: value.beds,
baths: value.baths,
sq_ft: value.sq_ft
});
})
});
}]);
And the 2 JSON files with their objects and properties.
window.__BATMAN_DATA__ = {
"1806 E. Wayne Lane, Fort Dodge, IA 50501": {
"cost": "849,950",
"beds": "5",
"baths": "3",
"sq_ft": "4050",
"img": "http://stevensegallery.com/200/200",
"url": "http://trulia.com"
},
"1774 Kapow Drive, Hyattsville, MD 20782": {
"cost": "419,950",
"beds": "3",
"baths": "2",
"sq_ft": "1700",
"img": "http://stevensegallery.com/200/200",
"url": "http://trulia.com"
},
"773 Duhnuhnuhna Street, Essex, MD 21221": {
"cost": "524,999",
"beds": "3",
"baths": "2",
"sq_ft": "1980",
"img": "http://stevensegallery.com/200/200",
"url": "http://trulia.com"
},
"178 Pennyworth Avenue, Depew, NY 14043": {
"cost": "619,999",
"beds": "4",
"baths": "1.5",
"sq_ft": "2100",
"img": "http://stevensegallery.com/200/200",
"url": "http://trulia.com"
}
};
and:
window.__SUPERMAN_DATA__ = {
"items": [
{
"address": "7791 Luther Way, Knoxville, TN 37918",
"price": "549999",
"beds": "3",
"baths": "2.5",
"sqft": "3000",
"built": "1976",
"thumb": "http://fillmurray.com/150/150",
"url": "http://zillow.com"
},
{
"address": "1774 Kapow Drive, Hyattsville, MD 20782",
"price": "419950",
"beds": "3",
"baths": "2",
"sqft": "1700",
"built": "2001",
"thumb": "http://stevensegallery.com/200/200",
"url": "http://zillow.com"
},
{
"address": "3121 5th Street, Gotham, NY 27520",
"price": "280000",
"beds": "2",
"baths": "1",
"sqft": "",
"built": "1948",
"thumb": "http://fillmurray.com/150/150",
"url": "http://zillow.com"
},
{
"address": "178 Pennyworth Avenue, Depew, NY 14043",
"price": "619999",
"beds": "4",
"baths": "1.5",
"sqft": "2100",
"built": "2014",
"thumb": "http://stevensegallery.com/200/200",
"url": "http://zillow.com"
}
]
};
As you can see, I reference ng-repeat with "item in items" and structured the http.get to grab that way with the object. Ideas please?
解决方案
Please check your JSON. Think so JSON is not valid.
BatmanReality.json
{"batman" : {
"1806 E. Wayne Lane, Fort Dodge, IA 50501": {
"cost": "849,950",
"beds": "5",
"baths": "3",
"sq_ft": "4050",
"img": "http://stevensegallery.com/200/200",
"url": "http://trulia.com"
},
"1774 Kapow Drive, Hyattsville, MD 20782": {
"cost": "419,950",
"beds": "3",
"baths": "2",
"sq_ft": "1700",
"img": "http://stevensegallery.com/200/200",
"url": "http://trulia.com"
},
"773 Duhnuhnuhna Street, Essex, MD 21221": {
"cost": "524,999",
"beds": "3",
"baths": "2",
"sq_ft": "1980",
"img": "http://stevensegallery.com/200/200",
"url": "http://trulia.com"
},
"178 Pennyworth Avenue, Depew, NY 14043": {
"cost": "619,999",
"beds": "4",
"baths": "1.5",
"sq_ft": "2100",
"img": "http://stevensegallery.com/200/200",
"url": "http://trulia.com"
}}}
supermanReality.json
{"superman" : {
"items": [
{
"address": "7791 Luther Way, Knoxville, TN 37918",
"price": "549999",
"beds": "3",
"baths": "2.5",
"sqft": "3000",
"built": "1976",
"thumb": "http://fillmurray.com/150/150",
"url": "http://zillow.com"
},
{
"address": "1774 Kapow Drive, Hyattsville, MD 20782",
"price": "419950",
"beds": "3",
"baths": "2",
"sqft": "1700",
"built": "2001",
"thumb": "http://stevensegallery.com/200/200",
"url": "http://zillow.com"
},
{
"address": "3121 5th Street, Gotham, NY 27520",
"price": "280000",
"beds": "2",
"baths": "1",
"sqft": "",
"built": "1948",
"thumb": "http://fillmurray.com/150/150",
"url": "http://zillow.com"
},
{
"address": "178 Pennyworth Avenue, Depew, NY 14043",
"price": "619999",
"beds": "4",
"baths": "1.5",
"sqft": "2100",
"built": "2014",
"thumb": "http://stevensegallery.com/200/200",
"url": "http://zillow.com"
}
]}}
and
html:
<div class="properties col-md-12" style="margin-top: 10px;">
<div class="col-md-5 propDtl" style="padding: 10px; display: block;" ng-repeat="item in items">
<div class="listImg" style="float: left;">
<img src="http://placehold.it/200x200" style="display: block;">
</div>
<div class="propTxt" style="margin-left: 220px; padding: 10px 0px 10px 0px;">
<p style="font-size: 22px; color: blue;">{{ item.address }}</p>
<p style="font-size: 22px; color: blue;">{{ item.address }}</p>
<p style="font-size: 26px; color: black;">{{ item.cost }}</p>
<ul>
<li>{{ item.beds }}</li>
<li>{{ item.baths }}</li>
<li>{{ item.sq_ft }}</li>
</ul>
</div>
</div>
</div>
这篇关于使用 ng-repeat 从 2 个不同的 JSON 文件中提取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
