Return list of properties using ng-repeat (AngularJS)

Question

I am trying to convert a working JavaScript/Jquery feature to AngularJS (1.0) so I can add it to a fairly large AngularJS application. I am having some issues getting data to the view using ng-repeat and not sure where my issue is. I was reading through $index documentation and not sure if this is the source of my issue or what I need to do. Also not getting anything in the console for the response.data.deviceList object.

Possible I have a few issues going on here.

HTML

<!doctype 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">
<div class="tile draggable" ng-controller="mainScripts" ng-repeat="stuff in titles">
    <ul>
        <li>{{stuff.location}}</li>
        <li>{{stuff.description}}</li>
    </ul>

</div>
</div>

</body>
</html>

JavaScript

var mainApp = angular.module('mainApp',[]);

mainApp.controller('mainScripts', function($scope, $http) {

$http.get('devices.json').then(function successCallback(response){
    console.log("API call works!");

    console.dir(response.data.deviceList);

var titles = response.data.deviceList;

});

}, function errorCallback(response) {
    console.log("API call doesn't work");

});

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

`title` isn't bound to `$scope` (i.e. `$scope.title = ...`), which is likely why you can't see `ng-repeat` doing anything. — miqh, Jul 19 '18 at 21:28
I changed it to $scope.titles but that didn't resolve the issue. The response.data.deviceList object still isn't returning anything to the console, which is the first issue at the moment before it hits that variable declaration of titles — SDH, Jul 19 '18 at 21:34
@SDH see [**my answer**](https://stackoverflow.com/questions/51431764/return-list-of-properties-using-ng-repeat-angularjs/51432401#51432401)... you have some errors in your code. — lealceldeiro, Jul 20 '18 at 14:41
@lealceldeiro thanks so much. I'm looking at it right now. Just got to the office ;) — SDH, Jul 20 '18 at 14:56

lealceldeiro · Accepted Answer · 2018-07-20T14:58:22.697

You are declaring the controller inside the ng-repeat (which is incorrect, you need only one controller instance for handling the entire collection, and not one (controller) instance for every element in the collection), so change

this <div ng-app="mainApp">

to <div ng-app="mainApp" ng-controller="mainScripts">

and this <div class="tile draggable" ng-controller="mainScripts" ng-repeat="stuff in titles">

to this <div class="tile draggable" ng-repeat="stuff in titles">

Also, you misplaced the error callback...see below working sample (mocked data)

var mainApp = angular.module('mainApp', []);

mainApp.controller('mainScripts', function($scope, $http) {

  var data = {
    "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"]
    }]
  };

  $scope.titles = data.deviceList; // mocked, replace with real $http.get

/*
  // this is the correct way
  $http.get('devices.json').then(function successCallback(response) {
    console.log("API call works!");

    console.dir(response.data.deviceList);

    $scope.titles = response.data.deviceList;

  }, function errorCallback(response) { // error callback goes here
    console.log("API call doesn't work");
  });
  */

}); // <-- removed error call back from here

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="mainApp" ng-controller="mainScripts"> <!-- moved controller here! -->
  <div class="tile draggable" ng-repeat="stuff in titles"> <!-- removed controller from here -->
    <ul>
      <li>{{stuff.location}}</li>
      <li>{{stuff.description}}</li>
    </ul>

  </div>
</div>

Thank you for the clarification. Super helpful :) – SDH Jul 20 '18 at 14:59 — SDH, Jul 20 '18 at 14:59

Return list of properties using ng-repeat (AngularJS)

1 Answers1