AngularJS：ng-repeat不显示JSON

Question

I'm trying to get Angular to display JSON data that I've managed to pull from a database via PDO. 我正在尝试让Angular显示我已设法通过PDO从数据库中提取的JSON数据。 The PDO part and JSON encode part is working fine -- console is returning the data as expected. PDO部分和JSON编码部分工作正常-控制台按预期返回了数据。

However, when using ng-repeat the div s do display but post.time does not show. 但是，使用ng-repeat时， div会显示，但post.time不显示。

HTML 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 JSON数据

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

JS 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;
    });

  }]);

}());

At first I did not include track by $index but upon receiving a dupes error I decided to include it. 最初，我没有包含track by $index但是在收到重复错误时，我决定将其包含在内。

I would like to display the JSON data in the HTML page using ng-repeat. 我想使用ng-repeat在HTML页面中显示JSON数据。 Can anybody lend a helping hand to get this working? 任何人都可以伸出援手使它正常工作吗？

Answer 1

You need to declare $scope.graph variable at first, before you can pass data to $scope.graph.posts. 您需要先声明$ scope.graph变量，然后才能将数据传递到$ scope.graph.posts。

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

Working example - JSFiddle http://jsfiddle.net/RkykR/294/ 工作示例-JSFiddle http://jsfiddle.net/RkykR/294/

HTML HTML

<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>

JavaScript JavaScript的

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

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

CSS CSS

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

Because json is naming the properties as "time" rather than time , have you tried using array notation to access them? 由于json将属性命名为"time"而不是time ，您是否尝试过使用数组符号访问它们？ eg 例如

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

Answer 3

I resolved the issue. 我解决了这个问题。 I had comments in my php files outside of the php tags. 我在php标记之外的php文件中有注释。 So when angular tries to get the JSON data from the php page, the comments were fetched too. 因此，当angular尝试从php页面获取JSON数据时，注释也会被提取。 Thanks for all the help. 感谢您的所有帮助。

AngularJS：ng-repeat不显示JSON

问题描述

3 个解决方案

解决方案1
0 2014-11-26 06:59:20

解决方案2
0 2014-11-26 08:09:42

解决方案3
0 已采纳 2014-11-26 08:49:28

AngularJS：ng-repeat不显示JSON

问题描述

3 个解决方案

解决方案1 0 2014-11-26 06:59:20

解决方案2 0 2014-11-26 08:09:42

解决方案3 0 已采纳 2014-11-26 08:49:28

解决方案1
0 2014-11-26 06:59:20

解决方案2
0 2014-11-26 08:09:42

解决方案3
0 已采纳 2014-11-26 08:49:28