Coding Away Coding Away - 3 months ago 8
Ajax Question

Nothing Displayed in web page with Angular clearly showing data in an array

Not sure what is going on , but I'm not getting anything to display on my web page with ng-repeat with template.

Here is a picture image showing the data

This pic shows my console.log output with array of objects

NO IDEA why doesn't just display on the web page!

Devices: Array[17]
0 : Object
Aid : "....."
...
1 : Object


Angular controller with function

(function () {
'use strict';

angular.module('app').controller('DeviceController', DeviceController);

function DeviceController($http){
var vm = this;
var dataService = $http;
//dataService.get("/api/Product")

vm.devices = [];

deviceList();

function deviceList() {
dataService.get("http://localhost:42822/api/device")
.then(function (result) {
vm.devices = result.data;
//debugger;
console.log(vm.devices);
},
function (error) {
handleException(error);
});
}


function handleException(error) {
alert(error.data.ExceptionMessage);
}

}



})();


HTML

<html>

<head> </head>

<body>
<div ng-app="app" ng-controller="DeviceController as vm">
<div>test</div><br>

<table>
<tbody>
<tr ng-repeat="device in vm.devices">
<td>{{device.Aid}}</td>
<td>{{device.DeviceId}}</td>
</tr>
</tbody>
</table>


</div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

<!--<script src="~/Scripts/angular.min.js"></script>-->
<script src="./app/app.module.js"></script>
<script src="./app/device.controller.js"></script>



</html>


NO IDEA why doesn't just display on the web page!

Answer

As you have data inside Devices object of response, then you need to change your assignment in ajax resolve like below.

vm.devices = result.data.Devices;

I'd suggest you to change your response from server, instead of sending Devices collection in Devices object, directly send it in response.


OR you could also make changes on HTML directly, but it wouldn't be good way to go.

<tr ng-repeat="device in vm.devices.Devices">
    <td>{{device.Aid}}</td>
    <td>{{device.DeviceId}}</td>
</tr>