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

Question

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!

Pankaj Parkar · Accepted Answer · 2016-08-19 21:03:46Z

2

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>

edited Aug 19, 2016 at 21:03

answered Aug 19, 2016 at 21:01

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user6736489 Over a year ago

Nice ! that worked . 1. This looks UGLY to me, is that standard or should i changed something in my code to fix this , again thank you so much

Pankaj Parkar Over a year ago

@CodingAway it would be awesome if you return Devices collection directly in the response..

user6736489 Over a year ago

Ok wait , it "works with vm.devices.Devices , but i did not change to have result.data.Devices - If I DID change to result.data.Devices, then would I be able to just do device in vm.devices ?

Pankaj Parkar Over a year ago

@CodingAway yes, thats why I had separator between those two way, 1st one appropriate.. don't go for 2nd one(its just for demo)

user6736489 Over a year ago

Ok, thx so much - real quick ,.. this data comes from a Web Api service call, so how can i achieve this on my end (client)? " if you return Devices collection directly in the response.. " Does this have to be done on the server side ? thx

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related