Load table from Ajax JSON with angular and ng-repeat

Question

I try to load a table in HTML from Ajax json, using Angular and ng-repeat. My problem is that the JSON is a bit complicated and I don't know how to access "informationstyp", which is what I want to display in the table. The root of the JSON ("values") is a list. Next level ("informationstyper") is also a list.

How can I get "informationstyp" into the table? What should I write instead of {{data.arendeslagId}} in my html?

What I want in my table is:

FK1002

FK1003

FK1004

Thank you for your help.

My html:

        <table class="table table-hover">
            <thead>
            <tr>
                <th>Arendeslagid</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="data in infotyper">
                <td>{{data.arendeslagId}}</td>
            </tr>
            </tbody>
        </table>

My JavaScript:

    $scope.infotyper = "";

    $scope.invoke = function() {
        $.ajax({
               "cache": false,
               "async": true,
               "crossDomain": true,
               "url": url",
               "method": "POST",
               "headers": {
                   "cache-control": "no-cache",
               },
            success: function (response) {
                   $scope.infotyper= response;
               }
           });
        };

My JSON-response:

you can use $http service methods in angular instead of jquery ajax. — hasan
– hasan, Commented Jun 4, 2017 at 23:08

quirimmo · Accepted Answer · 2017-06-04 22:50:54Z

3

Try to change this:

success: function (response) {
  $scope.infotyper= response;
}

To this:

success: function (response) {
  $scope.infotyper= response.values;
  $scope.$apply();
}

If you are using AngularJS I strongly suggest you to use $http service instead of jQuery for AJAX requests

answered Jun 4, 2017 at 22:50

quirimmo

10k3 gold badges33 silver badges46 bronze badges

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

3 Comments

chichi Over a year ago

That's not working either. How can I get into the next level in JSON ("informationstyper")?

quirimmo Over a year ago

That field is an Array. So you need another ng-repeat for cycling inside those elements. For example:

<tr ng-repeat="data in infotyper"> <td>{{data.arendeslagId}}</td> <td ng-repeat="typer in data.informationstyper">{{typer.informationstyp}}</td>             </tr>

chichi Over a year ago

Thank you, that's exactly what I needed!

Collectives™ on Stack Overflow

Load table from Ajax JSON with angular and ng-repeat

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related