Access json data from angularjs

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/

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'} ]; 

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

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.