Get table data using $http in angular

Question

I am new to angular and am trying to load table data from controller.Data is coming but its not displaying in table.What went wrong here?

<script>
    var app=angular
                .module("intranet_App", [])
                .controller('myCtrl', function ($scope, $http) {
                    $http.post("/Admin/getRolesList")
                    .then(function (response) {
                        console.log(response)
                        $scope.List= response.data;
                       console.log(List)
                    });
                })
</script>

Here /Admin/getRolesList is my controller name and path.

html:

          <tbody >
                <tr ng-repeat="x in List">
                    <td>{{List.Id}}</td>
                    <td>{{List.name}}</td>
                </tr>
            </tbody>

This is my response format:

Ramesh Rajendran · Accepted Answer · 2017-05-30 10:59:36Z

1

You have getting the values from like Array.value, it should like Array[0].value. So Use x.Id instead of List.Id,

             <tbody>
                <tr ng-repeat="x in List">
                    <td>{{x.Id}}</td>
                    <td>{{x.name}}</td>
                </tr>
            </tbody>

answered May 30, 2017 at 10:59

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

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

2 Comments

user7397787 Over a year ago

thanks man.working :-) one doubt, what is x here ?we can use anything instead of x right? If I want 1,2,3... in the place of id means ..how to use for loop here?

Ramesh Rajendran Over a year ago

here, x is object name of the expression. more details : w3schools.com/angular/ng_ng-repeat.asp

Nainish Modi · Accepted Answer · 2017-05-31 09:45:39Z

1

  //use track by for performance optimization..
         <tbody>
            <tr ng-repeat="x in List track by $index">
                <td>{{x.Id}}</td>
                <td>{{x.name}}</td>
            </tr>
        </tbody>

answered May 31, 2017 at 9:45

Nainish Modi

4882 silver badges10 bronze badges

1 Comment

Nainish Modi Over a year ago

Please refer this for more understanding docs.angularjs.org/error/ngRepeat/dupes

Collectives™ on Stack Overflow

Get table data using $http in angular

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related