How to get an object inside an object in json using angular js
Here is my json file.
{
"countries":[
{
"country": "India",
"cities" : [{
"name": "Bangalore",
"rank": "40"
},
{ "name": "Mumbai",
"rank": "32"
},
{ "name": "Kolkata",
"rank": "54"
},
{ "name": "Chennai",
"rank": "42"
}]
},
{ "country": "China",
"cities":[{"name": "Guangzhou",
"rank": "111"
},
{ "name": "Fuzhou",
"rank": "21"
},
{ "name": "Beijing",
"rank": "90"
},
{ "name": "Baotou",
"rank": "23"
}]
}
]}
I want to show all name and rank of all cities in the html table, but I cannot do that. Angular js code:
app.controller('cityCtrl1', function($scope, $http){
$http.get("http://localhost:8080/Angular%20Examples/angularCountries/app/json/countriesToCities1.json").success(function(data){
$scope.cities = data.countries;
});
});
HTML code:
<tr ng-repeat="city in cities | filter: selectName1">
<div ng-repeat="details in city.cities">
<td> {{details.name}} </td>
<td> {{details.rank}}</td>
</div>
</tr>
Maybe I can change the code in the controller file to get the data, but not sure if this will work or not.
+3
source to share
2 answers
The first thing div inside tr is not allowed (doesn't work either) - check the <div> in <tr>: is this correct?
So, I have a change format -
<ul class="table" ng-repeat="country in cities.countries">
<li class="city-row" ng-repeat="city in country.cities">
<span class="city-name">{{city.name}}</span>
<span class="city-count">{{city.rank}}</span>
</li>
</ul>
I created a working example - http://plnkr.co/edit/1GTqNPcfigd9XRaAy0vg
Apply your own CSS to render it in table format.
+1
source to share
what you are trying to do is reference city.states, but where, since states are not a json object..change it to city.cities
<tr ng-repeat="city in cities | filter: selectName1">
<div ng-repeat="details in city.cities">
<td> {{details.name}} </td>
<td> {{details.rank}}</td>
</div>
</tr>
0
source to share