how to get the object inside object in json using angular js - html

Question

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 the name and rank of all the cities in the html table,
but I am unable to do this.
Angular js code is:
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 is:
<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>
Might be I could change the code in controller file for getting the data, but not sure that will work or not.

Answer 1

First thing div inside a tr is not allowed(not working also) - Check this <div> into a <tr>: is it correct?
So I have 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 have created working example - http://plnkr.co/edit/1GTqNPcfigd9XRaAy0vg
Apply your own CSS to display it in table format.

Answer 2

what you are trying to do is,to refer city.states but where as states is not an object of json..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>