使用ng repeat从两个不同的JSON文件中提取数据
Using ng-repeat to pull data from 2 different JSON files
我没有收到错误，但无法获得要渲染的数据。我的结构很简单，json文件在一个文件夹中，视图在另一个文件夹，脚本/控制器在另一个中。简单地使用控制器来完成工作，因为它是一个直接的小部件。任何可能导致失败的想法，因为我没有出现错误，我相信我的映射是正确的。
我的代码：
此处更新视图：
<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 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>
我的控制器：
'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
});
})
});
}]);
以及2个JSON文件及其对象和属性。
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"
}
};
和：
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"
}
]
};
正如您所看到的，我用"item-initems"引用ng-reeat，并构造http.get以获取对象。有什么想法吗？
请检查您的JSON。所以JSON是无效的。
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"
}}}
supermanAlity.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"
}
]}}
和
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>
在Json窗口中BATMAN_DATA和窗口SUPERMAN_DATA不是一个数组，它是一个对象中的对象。因此，请将您的json修改为-
window.__SUPERMAN_DATA__ = [
{
"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"
}
];
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"
}
}
];
相关文章：
- Javascript-如何读取json文件中的列并将其保存在Javascript数组中
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- 不显示带有本地json文件数据的谷歌地图脚本
- 可以't使用Appcelerator将JSON文件解析为JavaScript中的TableView
- 加载两个具有相同父密钥名称的json文件
- 使用JSON文件中的变量(字符串）填充文本区域
- 动态显示JSON文件内容
- 正在尝试将JSON文件放入JS数组
- 如何检查Json文件更新，如果更新了，则用更新的数据刷新我的页面
- 单击按钮更改加载到表中的JSON文件
- 处理一个JSON文件;完全相同的副本不是
- 在Javascript中加载JSON文件
- 使用Bootstrap将JSON文件加载到表中
- Angular 2:在本地.json文件上找不到文件
- JSON-从浏览器向外部服务器发送哪些http头JSON文件
- 如何获取d3.js中json文件中具有特定值的总行数
- 如何在dojo应用程序构建概要文件中加载json文件
- jQuery UI使用json文件自动完成
- 通过Azure存储以HTML形式获取JSON文件
- ngResource没有'从JSON文件解析HTML时不起作用
