Access json data from angularjs

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"
        }]
    }
]}

This is the angularjs code:

    $scope.countryType = [
        { type: 'India', data:$scope.India, displayName:'India' },
         { type: 'China', data:$scope.China, displayName:'China'},
         { type: 'Ethiopia', data:$scope.Ethiopia, displayName:'Ethiopia'},
         { type: 'Cuba', data:$scope.Cuba, displayName:'Cuba'}
];

This angularjs code is fine for me but I don't know how to access name and rank from this data of countryType and I also want to filter it according to country.

For HTML page I am using this code :

<select ng-model="country.city" ng-options="country as country.type for country in countryType | orderBy: 'type'">
        <option value=""> - Select a Country - </option>    
</select>

<ul ng-repeat = "city in countryType | filter : country.city.data.cities.country  ">
    <li ng-repeat="details in city.data.cities">
        <span> {{details.name}} </span>
        <span> {{details.rank}}</span>
    </li>
</ul>

Shall I have to use different code in html for accessing the data? All the data is coming but I am not able to filter it.

Answer 1

Well you are accessing your data in a wrong way! Without changing your JS code you can use the following code, which just access the data objects slightly different (but right) way than you did:

<ul ng-repeat = "country in countryType">
    <li ng-repeat="details in country.data.cities">
          <span> {{details.name}} </span>
          <span> {{details.rank}}</span>
    </li>
</ul>

And everything should work.

Answer 2

So, basically you have two level of Arrays in your data structure. And that is why you need to do loop inside the country loop to access the cities.

A bit of change in your data structure, And here in an example for your reference:

HTML:

<div class="container">
    <div ng-controller="FormController as formCtrl">
        <table>
            <tbody ng-repeat="country in formCtrl.contryType">
                <tr>
                    <th colspan="2">{{country.country}}</th>
                </tr>
                <tr ng-repeat="city in country.cities">
                    <td>{{city.name}}</td>
                    <td>{{city.rank}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

JavaScript:

var app = angular.module("myApp", []);

app.controller("FormController", function () {
    var ctrl = this;

    ctrl.contryType = [{
            "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"
                }
            ]
        }
    ];
});

angular.bootstrap(document, ['myApp']);

Working Fiddle: http://jsfiddle.net/ashishanexpert/zvcx5z38/5/

Answer 3

You can loop through the list JSON and store it in an array:

$scope.countryType = [];

angular.forEach(json.countries, function(data){
    $scope.countryType.push({type: data.country, data: data});
});

Demo

Answer 4

You can not access object property by value as in $scope.India. You should be using a function to retrieve the cities of the given country.

$scope.getCityList = function(country)
{
     var index = arrayObjectIndexOf($scope.countries, country, ["country"]);
     return $scope.countries[index].cities;
}

function arrayObjectIndexOf(myArray, searchTerm, property) {
        for(var i = 0, len = myArray.length; i < len; i++) {
            var value = myArray[i];
            for(var j=0; j<property.length; j++)
            {
                value = value[property[j]];
            }
            if (value === searchTerm) return i;
        }
        return -1;
    }

So finally, the Angular JS code gets :

 $scope.countryType = [
    { type: 'India', data:$scope.getCityList("India"), displayName:'India' },
     { type: 'China', data:$scope.getCityList("China"), displayName:'China'},
     { type: 'Ethiopia', data:$scope.getCityList("Ethiopia"), displayName:'Ethiopia'},
     { type: 'Cuba', data:$scope.getCityList("Cuba"), displayName:'Cuba'}
 ];