Question

如何通过angularJS http：

从这个JSON文件中显示“city”

{"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

第1步：

调用url并获取$ scope.data变量中的json数据，并在模板中使用ng repeat

第2步：

为控制器中的城市使用每个角度

参考以下示例

＆＃13;

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)
});

          
 });

＆＃13;

<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>

＆＃13;

希望这会对你有所帮助

Answer 2

您可以在 myData.ers.data.alarms

上使用ng-repeat

<强>样本

＆＃13;

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

＆＃13;

<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>

＆＃13;

显示嵌套JSON数组的数据

2 个答案: