Using ng-repeat to pull data from 2 different JSON files
Question
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?
2 answers
solution1
1 2016-04-11 06:09:33
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>
solution2
0 2016-04-11 06:10:01
In Your Json, window. BATMAN_DATA and window. SUPERMAN_DATA is not an array, it's object of objects. So please modify your json as-
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"
}
}
];
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Using ng-repeat with data from two JSON files
while using ng-repeat tag with json data
Angular.js ng-repeat no data using json
How to read Json data using ng-repeat
How to print Json data in ng-repeat using angularjs?
Parsing Uneven data/ json object using ng-repeat
ng-repeat on select with optgroup using json data in angular
CSS Star Rating with ng-repeat and json data using angularjs
Create Table from JSON Data with angularjs and ng-repeat
bind data from different requests in ng-repeat
Related Tags