show data from nested JSON array - angularjs

Question

how to show "city" from this JSON file through angularJS http:
{"ers":{"resMessage":"1","response":"Success","data":{"alarms":[{"id":"1","alarm_id":"2","title":"Fire","description":"fire","type":"Fire","priority":"High","address":"Kanpur, Uttar Pradesh, India","city":"Kanpur","state":"UP","country":"India","zipcode":"123456","lattitude":"26.449923","longitude":"80.3318736"},{"id":"3","alarm_id":"4","title":"test-02","description":"test-02","type":"Medical","priority":"High","address":"Borivali West, Mumbai, Maharashtra, India","city":"Mumbai","state":"MH","country":"India","zipcode":"123456","lattitude":"19.2461644","longitude":"72.85090560000003"}]}}}

Answer 1

Step 1:
Call url and get json data in $scope.data variable and use ng repeat in your template
Step 2:
Use angular for each for get city in controller
Refer following example
angular.module('myApp',[]).controller('myCtrl', function($scope){
$scope.data = {
"ers": {
"resMessage": "1",
"response": "Success",
"data": {
"alarms": [{
"id": "1",
"alarm_id": "2",
"title": "Fire",
"description": "fire",
"type": "Fire",
"priority": "High",
"address": "Kanpur, Uttar Pradesh, India",
"city": "Kanpur",
"state": "UP",
"country": "India",
"zipcode": "123456",
"lattitude": "26.449923",
"longitude": "80.3318736"
}, {
"id": "3",
"alarm_id": "4",
"title": "test-02",
"description": "test-02",
"type": "Medical",
"priority": "High",
"address": "Borivali West, Mumbai, Maharashtra, India",
"city": "Mumbai",
"state": "MH",
"country": "India",
"zipcode": "123456",
"lattitude": "19.2461644",
"longitude": "72.85090560000003"
}]
}
}
};
angular.forEach($scope.data.ers.data.alarms, function(value) {
console.log(value.city)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="obj in data.ers.data.alarms">
City:- {{obj.city}}<br>
Address:- {{obj.address}}
</div>
</div>
Hope this will help you

Answer 2

You can use ng-repeat over myData.ers.data.alarms
DEMO
angular.module('myApp',[]).controller('myCtrl', function($scope){
$scope.myData = {"ers":{"resMessage":"1","response":"Success","data":{"alarms":[{"id":"1","alarm_id":"2","title":"Fire","description":"fire","type":"Fire","priority":"High","address":"Kanpur, Uttar Pradesh, India","city":"Kanpur","state":"UP","country":"India","zipcode":"123456","lattitude":"26.449923","longitude":"80.3318736"},{"id":"3","alarm_id":"4","title":"test-02","description":"test-02","type":"Medical","priority":"High","address":"Borivali West, Mumbai, Maharashtra, India","city":"Mumbai","state":"MH","country":"India","zipcode":"123456","lattitude":"19.2461644","longitude":"72.85090560000003"}]}}};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="data in myData.ers.data.alarms">
<h1> {{data.city}}</h1>
</div>
</div>