CODEWITHSUNDEEP
angularjsjson
user8081044
user8081044

Reputation:

show data from nested JSON array

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

Upvotes: 0

Views: 46

Answers (2)

NIKHIL RANE
NIKHIL RANE

Reputation: 4092

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

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222722

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>

Upvotes: 0

Related Questions