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