AngularJS not displaying json data

Question

I've been stuck for some time now trying to display JSON data in a table with AngularJS 1.6.9.

Here is my index.html:

<!DOCTYPE html>

<head>
    <title>Een eenvoudige service</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="service.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
    </script>
</head>
<div ng-app="mijnApp" ng-controller="mijnController">
    <table>
        <tr>
            <th>ID</th>
            <th>City</th>
            <th>Country</th>
        </tr>
        <tr ng-repeat="x in personen">
            <td>{{x.Name}}</td>
            <td>{{x.City}}</td>
            <td>{{x.Country}}</td>
        </tr>
    </table>
</div>
</body>

</html>

Here is my JavaScript:

var App = angular.module('mijnApp', []);
App.controller('mijnController', function($scope, $http) {
    $http.get("personen.json").then(function(response) {
        $scope.personen = response.data;
    });
});

Small example of my json file:

{
    "records": [{
        "Name": "Alfreds Futterkiste",
        "City": "Berlin",
        "Country": "Germany"
    }, {
        "Name": "Ana Trujillo Emparedados y helados",
        "City": "México D.F.",
        "Country": "Mexico"
    }]
}

I've tried multiple methods and the result is always the same - empty table.

How can I resolved this issue? Please help me for the same issue.

unwrap "records" -> <tr ng-repeat="x in personen.records"> — Aleksey Solovey
– Aleksey Solovey, Commented Apr 12, 2018 at 12:56

Manish Balodia · Accepted Answer · 2018-04-12 12:56:28Z

2

Try this:

<tr ng-repeat="x in personen.records">
            <td>{{x.Name}}</td>
                <td>{{x.City}}</td>
                    <td>{{x.Country}}</td>
        </tr>

answered Apr 12, 2018 at 12:56

Manish Balodia

1,8752 gold badges24 silver badges38 bronze badges

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

1 Comment

Odwori Over a year ago

using this approach am getting data displayed but also I get this error OrderDeatilsComponent.html:16 ERROR TypeError: Cannot read property 'details' of undefined

oma · Accepted Answer · 2018-04-12 12:58:53Z

0

You missed the records from response. use x in personen.records or set de personen in the http response like this $scope.personen = response.data.records;

I prefer the second option personally.

answered Apr 12, 2018 at 12:58

oma

1,89414 silver badges14 bronze badges

Comments

Sikandar Sahab · Accepted Answer · 2018-04-25 08:58:55Z

-1

This will help

$.ajax({ 
    url : "personen.json", 
    dataType : 'JSON', 
    success : function(data) { 
        $scope.personen = data;
    }, 
    error : function(error) { 
        console.log( "error occurred." );     
    }
});

HTML use this to view the records.

<table>
    <tr ng-repeat="record in personen.records">
       <td> {{record.Name}} </td>
       <td> {{record.City}} </td>
       <td> {{record.Country}} </td>
    </tr>
</table>

edited Apr 25, 2018 at 8:58

answered Apr 12, 2018 at 13:03

Sikandar Sahab

7085 gold badges12 silver badges29 bronze badges

6 Comments

Sikandar Sahab Over a year ago

@oma pointing to the hardcoded json, returns only the data except the status and anything else. It works for me and I am still using it. Please upvote

oma Over a year ago

Yes you are right, I didn't noticed that you changed the angular $http call to ajax one, sry my bad, but still not solve his issue, because he forgot to use another object(records) from the response json.

oma Over a year ago

this will not solve his issue, is not a good answer after all :|

Sikandar Sahab Over a year ago

@oma the whole object is returned into $scope.personen and then using personen.records in html angularjs, successfully fetches the records. What's the problem?

oma Over a year ago

upvoted, but pls remove your 2 code snippets, they are useless to solve his issue... and if you always edit your answer is disturbing.. because i put a comment that your initial code is irrelevant as answer...

|

Collectives™ on Stack Overflow

AngularJS not displaying json data

3 Answers 3

1 Comment

Comments

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

6 Comments

Related