Troubleshooting: AngularJS ng-repeat not rendering JSON data

Question

Troubleshooting: AngularJS ng-repeat not rendering JSON data

I have successfully retrieved JSON data from a database using PDO in Angular. The data is being returned as expected when I encode it to JSON. However, I am facing an issue with displaying the data using ng-repeat in Angular.

Although the div elements are showing up, the post.time value is not being displayed.

HTML

<html ng-app="dataVis">
    . . .
    <body ng-controller="GraphController as graph">
        <div ng-repeat="post in graph.posts track by $index">
            {{post.time}}
        </div>
    </body>
</html>

JSON data

[
    {
        "time": "1340",
        "postId": "282301",
        "likes": "2"
    },
    {
        "time": "1300",
        "postId": "285643",
        "likes": "0"
    }
] . . . (etc)

JS

(function () {

  var app = angular.module('dataVis', []);

  app.controller('GraphController', ['$http', function ($http) {
    var graph = this;
    graph.posts = [];
    $http.get('/query-general.php').success(function (data) {
      console.log(data); // returns JSON data
      graph.posts = data;
    });

  }]);

}());

In my initial code, I did not include track by $index, but after encountering a duplicate error, I added it.

I am seeking assistance in properly displaying the JSON data on the HTML page using ng-repeat in Angular. Any help would be greatly appreciated!

javascript json angularjs angularjs-ng-repeat

Answer 1

Answer №1

Before passing data to $scope.graph.posts, make sure to declare the $scope.graph variable first.

$scope.graph = {};
$scope.graph.posts = data;

To see a working example, check out this JSFiddle http://jsfiddle.net/RkykR/294/

This is how the HTML code looks:

<h3>Ng-Repeat example</h3>
<div ng-app ng-controller="MyCtrl">

<table>
    <thead>
        <tr><td>time</td>
            <td>postID</td>
    <td>likes</td>
        </tr>
        </thead>
    <tbody>
                <tr ng-repeat="item in graph.posts"><td>{{item.time}}</td>
            <td>{{item.postId}}</td>
    <td>{{item.likes}}</td>
        </tr>
    </tbody>
</table>
</div>

And here is the JavaScript code:

   var data = [
    {
        "time": "1340",
        "postId": "282301",
        "likes": "2"
    },
    {
        "time": "1300",
        "postId": "285643",
        "likes": "0"
    }
];

function MyCtrl($scope) {
    $scope.graph = {};
    $scope.graph.posts = data;
}

Finally, the CSS styling for the table:

table {
    padding:5px;
    width:500px;

}

table td {
    border: 1px solid gray;
    padding:3px 0;
    text-align:center;
}

table thead td {
    font-weight:bold;
}

Answer 2

Before passing data to $scope.graph.posts, make sure to declare the $scope.graph variable first.

$scope.graph = {};
$scope.graph.posts = data;

To see a working example, check out this JSFiddle http://jsfiddle.net/RkykR/294/

This is how the HTML code looks:

<h3>Ng-Repeat example</h3>
<div ng-app ng-controller="MyCtrl">

<table>
    <thead>
        <tr><td>time</td>
            <td>postID</td>
    <td>likes</td>
        </tr>
        </thead>
    <tbody>
                <tr ng-repeat="item in graph.posts"><td>{{item.time}}</td>
            <td>{{item.postId}}</td>
    <td>{{item.likes}}</td>
        </tr>
    </tbody>
</table>
</div>

And here is the JavaScript code:

   var data = [
    {
        "time": "1340",
        "postId": "282301",
        "likes": "2"
    },
    {
        "time": "1300",
        "postId": "285643",
        "likes": "0"
    }
];

function MyCtrl($scope) {
    $scope.graph = {};
    $scope.graph.posts = data;
}

Finally, the CSS styling for the table:

table {
    padding:5px;
    width:500px;

}

table td {
    border: 1px solid gray;
    padding:3px 0;
    text-align:center;
}

table thead td {
    font-weight:bold;
}

Answer 3

Answer №2

Have you attempted to access the properties in json by using array notation? This is necessary because the properties are named with quotes such as "time" instead of just time.

<td>{{item["time"]}}</td>
<td>{{item["postId"]}}</td>
<td>{{item["likes"]}}</td>

Answer 4

Have you attempted to access the properties in json by using array notation? This is necessary because the properties are named with quotes such as "time" instead of just time.

<td>{{item["time"]}}</td>
<td>{{item["postId"]}}</td>
<td>{{item["likes"]}}</td>

Answer 5

Answer №3

After some investigation, I discovered the root cause of the problem. It turns out that there were comments present in my PHP files outside of the designated PHP tags. This caused issues when Angular attempted to retrieve JSON data from the PHP page as it also fetched the unwanted comments. Grateful for the assistance provided throughout this troubleshooting process.

Answer 6

After some investigation, I discovered the root cause of the problem. It turns out that there were comments present in my PHP files outside of the designated PHP tags. This caused issues when Angular attempted to retrieve JSON data from the PHP page as it also fetched the unwanted comments. Grateful for the assistance provided throughout this troubleshooting process.

Troubleshooting: AngularJS ng-repeat not rendering JSON data

Answer №1

Answer №2

Answer №3

Similar questions

Testing API calls with ReactJS

What steps can be taken to ensure that a WebSQL query does not return negative

Stream JSON data to a file with Node.js streams

"Enhancing website performance with JavaScript by leveraging DOM innerHTML scrollHeight

Oops! Could not compile due to a syntax error: Invalid assignment expression on the left-hand side

Issue encountered during npm install process

Change the size of the individual cells within JointJS

How to assign various column values to a PHP array in JSON format from a MySQL database

Ways to define properties in backbone entities

After activating the rewrite feature on Tomcat valve, JavaScript is loading twice

PHP implementation for a static header layout

Deciphering a JSON array in PHP

Perform calculations for product and sum when button is clicked

What is the best way to incorporate AJAX with Node.js?

What is causing the issue with object to JSON conversion not functioning correctly in this particular scenario with Spring MVC?

Using JavaScript to create circular shapes on canvas with paint circle

I encountered a parsing issue while trying to compile my Vue project

NG build error: Module parsing failed due to an unexpected token - no updates made

Issue encountered while selecting the Electron app menu item

Utilize jQuery and PHP to populate an HTML Select Field with data retrieved from a MySQL Database in JSON format