CODEWITHSUNDEEP
javascriptangularjsjson
SDH
SDH

Reputation: 391

Angular JS - Iterate through properties of multiple objects

I am trying to use AngularJS (1.0) to iterate through properties of multiple objects and return each data set for each object as an unordered list. I was successful creating this using straight JQuery and JavaScript, but unfortunately, this needs to integrate into a rather large AngularJS application. Here's what I have for HTML, JSON, and JavaScript at the moment. Any help would be much appreciated:

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

Upvotes: 0

Views: 235

Answers (1)

Anil Sarkar
Anil Sarkar

Reputation: 160

Firstly in the successCallback you cannot directly use deviceList from the callback response. The reponse is returned in predefined object where "data" is one of the property inside this object.You need to change mainScripts.js as below. Now you should not get undefined.

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

});

Upvotes: 1

Related Questions