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

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.

Community · Accepted Answer · 2017-05-23 12:05:58Z

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.

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Jun 4, 2015 at 8:20

User2

1,3038 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bhanu.cs · Accepted Answer · 2015-06-04 07:40:46Z

0

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>

answered Jun 4, 2015 at 7:40

bhanu.cs

1,3751 gold badge11 silver badges25 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related