javascript - Angular JS - 遍历多个对象的属性
问题描述
我正在尝试使用 AngularJS (1.0) 来遍历多个对象的属性,并将每个对象的每个数据集作为无序列表返回。我使用直接的 JQuery 和 JavaScript 成功地创建了它,但不幸的是,这需要集成到一个相当大的 AngularJS 应用程序中。这就是我目前拥有的 HTML、JSON 和 JavaScript。任何帮助将非常感激:
JavaScript (mainScripts.js)
var mainApp = angular.module('mainApp',[]);
mainApp.controller('mainScripts', function($scope, $http) {
$http.get('devices.json').then(function successCallback(data){
console.log("API call works!");
// this callback will be called asynchronously
// when the response is available
console.log(data.deviceList);
//saying the above is undefined???
angular.forEach(data.deviceList, function(key, value){
$scope.titles = "<ul>" + "<li>" + key.location + "</li>"
+ "<li>" + key.description + "</li>"
+ "<li>" + key.instance + "</li>"
+ "<li>" + key.occupancy + "</li>"
+ "<li>" + key.schedule + "</li>"
+ "<li>" + key.deviceType[0] + "</li>" + "</ul>"
});
}, function errorCallback(data) {
console.log("API call doesn't work");
// called asynchronously if an error occurs
// or server returns response with an error status.
});
});
HTML
<html>
<head>
<meta charset="utf-8">
<title>Building Layout - Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="interact.js"></script>
<script src="angular.min.js"></script>
<script src="mainScripts.js"></script>
</head>
<body>
<div ng-app="mainApp" class="draggable deviceTiles" ng-controller="mainScripts">{{titles}}</div>
</body>
</html>
JSON (devices.json)
{
"deviceTypes": [{
"description": "Air Handler",
"typeName": "AirSource"
}, {
"description": "VAV Terminal",
"typeName": "AirTerminal"
}, {
"description": "Fan Coil",
"typeName": "ChilledWaterTerminal"
}, {
"description": "Chiller",
"typeName": "ChilledWaterSource"
}, {
"description": "Generic Unit",
"typeName": "NoResources"
}, {
"description": "Other Source",
"typeName": "OtherSource"
}, {
"description": "Other Terminal",
"typeName": "OtherTerminal"
}, {
"description": "Water Manager",
"typeName": "WaterSource"
}, {
"description": "WSHP Terminal",
"typeName": "WaterTerminal"
}],
"deviceList": [{
"href": "../MISRest/devices/3101117",
"location": "Loc Desk 3 VAV",
"description": "VAV 117",
"objectName": "VAV 117",
"instance": "3101117",
"occupancy": "Occupied",
"schedule": "Standard Schedule",
"ignore": "False",
"commStatus": "None",
"alarmStatus": "None",
"macaddress": "117",
"directSchedule": "True",
"rogueZone": "False",
"parentID": {
"air": "0"
},
"deviceType": ["AirTerminal"]
}, {
"href": "../MISRest/devices/3101121",
"location": "Loc Desk 4 with temp VAV",
"description": "VAV 121",
"objectName": "VAV Actuator Series 2 Bacnet ASC Controller",
"instance": "3101121",
"occupancy": "Error",
"schedule": "Standard Schedule",
"ignore": "False",
"commStatus": "Fault",
"alarmStatus": "Active",
"macaddress": "121",
"directSchedule": "True",
"rogueZone": "False",
"parentID": {
"air": "0"
},
"deviceType": ["AirTerminal"]
}, {
"href": "../MISRest/devices/3101004",
"location": "New Paris",
"description": "KMC Device",
"objectName": "BAC-8205_001635",
"instance": "3101004",
"occupancy": "Error",
"schedule": "Standard Schedule",
"ignore": "False",
"commStatus": "None",
"alarmStatus": "None",
"macaddress": "4",
"directSchedule": "True",
"rogueZone": "False",
"deviceType": ["NoResources"]
}, {
"href": "../MISRest/devices/3101013",
"location": "Default Location",
"description": "VAV-013",
"objectName": "DEFAULT",
"instance": "3101013",
"occupancy": "Occupied",
"schedule": "None",
"ignore": "False",
"commStatus": "None",
"alarmStatus": "None",
"macaddress": "13",
"directSchedule": "True",
"rogueZone": "False",
"parentID": {
"air": "0"
},
"deviceType": ["AirTerminal"]
}, {
"href": "../MISRest/devices/3101066",
"location": "Loc Desk AHU (1st)",
"description": "Desk AHU 066 (2nd)",
"objectName": "POL904_015413",
"instance": "3101066",
"occupancy": "Occupied",
"schedule": "None",
"ignore": "False",
"commStatus": "None",
"alarmStatus": "Active",
"macaddress": "66",
"directSchedule": "False",
"rogueZone": "False",
"deviceType": ["AirSource"]
}]
}
解决方案
首先,在 successCallback 中,您不能直接使用回调响应中的 deviceList。响应在预定义对象中返回,其中“数据”是该对象内部的属性之一。您需要更改 mainScripts.js,如下所示。现在你不应该得到未定义的。
mainApp.controller('mainScripts', function($scope, $http) {
$http.get('devices.json').then(function successCallback(response){
console.log("API call works!");
// this callback will be called asynchronously
// when the response is available
console.log(response.data.deviceList);
//saying the above is undefined???
angular.forEach(response.data.deviceList, function(key, value){
$scope.titles = "<ul>" + "<li>" + key.location + "</li>"
+ "<li>" + key.description + "</li>"
+ "<li>" + key.instance + "</li>"
+ "<li>" + key.occupancy + "</li>"
+ "<li>" + key.schedule + "</li>"
+ "<li>" + key.deviceType[0] + "</li>" + "</ul>"
});
推荐阅读
- reactjs - InputText 组件导致 TypeError: e.target is null when typing into text box (PrimeReact library, using arrow function)
- azure - 自动缩放 azure app service 命令抛出 ["UnsupportedMetric"] 错误
- github - POS 热敏打印机供应商文件
- javascript - Azure 地图删除默认边框/轮廓
- c++ - Neon/RPi 上的 64 位 DSP 滤波性能优化
- php - PayPal API 不再一直工作
- sql - 在 MS SQL 中设计数据透视表
- reactjs - 使用 typescript 模板将 create-react-app 更新到 4.0 时出错
- html - Css文本对齐被某些东西覆盖
- r - 基于R中不同日期的计数值