个人中心
gpt4 book ai didi

javascript - Angular JS - 迭代多个对象的属性

转载 作者：行者123 更新时间：2023-12-03 01:28:20 25 4
gpt4 key购买 nike

我正在尝试使用 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。响应在预定义对象中返回，其中“data”是该对象内的属性之一。您需要如下更改 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>"

});

关于javascript - Angular JS - 迭代多个对象的属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51408185/

25 4 0
文章推荐： javascript - 将数据添加到 firebase 并同时重定向到其他页面
文章推荐： javascript - sinon 监视功能不起作用
文章推荐： javascript - Extjs - 在 Model.save() 中重试 API 请求
文章推荐： javascript - Typescript 更新对象内的项目
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com