Bind Json Data to HTML TABLE

Question

i am new in angular programming,

i want to bind json data that i get from webservice to the html table,

here is my code :

<!DOCTYPE html>
<html>
<head>
    <title>LIST OF USER Sample</title>
    <script src="../Scripts/angular.min.js"></script>
    <script src="../Scripts/module.js"></script>
    <script>

        function PeopleCtrl($scope, $http) {

            $scope.people = [];

            $scope.loadPeople = function () {

                var httpRequest = $http
                    ({
                        method: 'GET',
                        url: 'http://10.17.44.236:9090/MobileBootcamp.svc/getalluseravailability'

                    })
                    .success(function (data, status) {
                        debugger;
                        $scope.people = data;

                    });


            };
            $scope.loadPeople();
        }

    </script>
</head>
<body>
    <div ng-app="app">
        <div ng-controller="PeopleCtrl" ng-init="loadPeople()">
            <table>
                <tr>
                    <th>Id</th>
                    <th>Availibility</th>
                </tr>
                <tr ng-repeat="x in people.Datalist[0]">
                    <td>{{x.UserID}}</td>
                    <td>{{x.Availability}}</td>
                </tr>
                <tr>
                    <td>{{people.DataList[0].UserID}}</td>
                    <td>{{people.DataList[0].Availability}}</td>
                </tr>
                <tr>
                    <td>{{people.DataList[1].UserID}}</td>
                    <td>{{people.DataList[1].Availability}}</td>
                </tr>

            </table>
        </div>
    </div>


    <script src="cordova.js"></script>
    <script src="js/platformOverrides.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

and this is the json from the web service

{"Status":true,"Message":"","Data":null,"DataList":[{"ChangeBy":"Admin","ChangeDate":"\/Date(1439437580137+0700)\/","ChangeNo":2,"CreateBy":"Admin","CreateDate":"\/Date(1439437580137+0700)\/","Availability":true,"LastCheckIn":"\/Date(1439437645420+0700)\/","UserID":"Admin"},{"ChangeBy":"ITK_ABD","ChangeDate":"\/Date(1439398800000+0700)\/","ChangeNo":1,"CreateBy":"ITK_ABD","CreateDate":"\/Date(1439398800000+0700)\/","Availability":false,"LastCheckIn":"\/Date(1439398800000+0700)\/","UserID":"ITK_ABD"}]}

i already try the "ng-repeat" but it didnt work,

the data is like Data --> DataList--> [0] --> userid,availability,etc...

thx in advance

<tr ng-repeat="x in people.Datalist[0]"> it should be <tr ng-repeat="x in people.DataList"> — Mohan Singh
– Mohan Singh, Commented Aug 13, 2015 at 10:06
is your http request viable? i followed it and go not available — Joe Lloyd
– Joe Lloyd, Commented Aug 13, 2015 at 10:07

Pierre-Alexandre Moller · Accepted Answer · 2015-08-13 10:10:33Z

2

You don't need the [0]. Your ng-repeat is here to get all elements of the list. You just have to give your list, not the index and angular will do the job.

<tr ng-repeat="x in people.DataList">

edited Aug 13, 2015 at 10:10

answered Aug 13, 2015 at 10:07

Pierre-Alexandre Moller

2,3541 gold badge22 silver badges29 bronze badges

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

1 Comment

Mohan Singh Over a year ago

Typo error. its people.DataList not people.Datalist

Vishwajeet Vatharkar · Accepted Answer · 2015-08-13 10:10:22Z

1

Do as following -

<tr ng-repeat="x in people.Datalist">
    <td>{{x.UserID}}</td>
    <td>{{x.Availability}}</td>
</tr>

as you have array of objects in Datalist, you should iterate DataList instead of DataList[0]

answered Aug 13, 2015 at 10:10

Vishwajeet Vatharkar

1,2065 gold badges20 silver badges42 bronze badges

Comments

Anil Sharma · Accepted Answer · 2015-08-13 10:07:28Z

0

No need for the [0]. we don't want to loop through your first object, So just people.DataList will do the job. It will loop through all objects inside that array .

           <tr ng-repeat="x in people.DataList">
                <td>{{x.UserID}}</td>
                <td>{{x.Availability}}</td>
            </tr>

answered Aug 13, 2015 at 10:07

Anil Sharma

2,9625 gold badges32 silver badges45 bronze badges

Comments

Likeee · Accepted Answer · 2015-08-13 10:09:15Z

0

You are trying to repeat object here:

<tr ng-repeat="x in people.Datalist[0]">

You can repeat only on Array data type. So you must do this like that:

<tr ng-repeat="x in people.Datalist">

answered Aug 13, 2015 at 10:09

Likeee

112 bronze badges

Collectives™ on Stack Overflow

Bind Json Data to HTML TABLE

4 Answers 4

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Related