Javascript AngularJS:ng重复不显示JSON_Javascript_Json_Angularjs_Angularjs Ng Repeat

Javascript AngularJS:ng重复不显示JSON

javascript json angularjs

Javascript AngularJS:ng重复不显示JSON,javascript,json,angularjs,angularjs-ng-repeat,Javascript,Json,Angularjs,Angularjs Ng Repeat,我试图通过PDO从数据库中提取JSON数据来显示JSON数据。PDO部分和JSON编码部分工作正常——控制台按预期返回数据但是，使用ng时，重复显示divs，但不显示post.time HTML <html ng-app="dataVis"> . . . <body ng-controller="GraphController as graph"> <div ng-repeat="post in graph.posts track

我试图通过PDO从数据库中提取JSON数据来显示JSON数据。PDO部分和JSON编码部分工作正常——控制台按预期返回数据

但是，使用ng时，重复显示

div

s，但不显示

post.time

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>

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

  }]);

}());

起初，我没有包括

track by$index

，但在收到dups错误后，我决定将其包括在内

我想使用ng repeat在HTML页面中显示JSON数据。有人能帮上忙吗？

首先需要声明$scope.graph变量，然后才能将数据传递给$scope.graph.posts

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

工作示例-JSFiddle

HTML

CSS

因为json将属性命名为

“time”

，而不是

time

，所以您是否尝试过使用数组符号来访问它们？ e、 g

{{item[“time”]}
{{item[“postId”]}
{{item[“likes”]}

我解决了这个问题。我的php文件中有php标记之外的注释。因此，当angular试图从php页面获取JSON数据时，也会获取注释。谢谢您的帮助。

请将所有内容放在这里。您是否验证了从HTTP请求成功返回的数据？是的，数据已成功返回

console.log（data）

返回预期的JSON数据not true，此问题使用“controller as”语法，不需要在

$scope

上注入$scope或注册

图形。图形==$scope。
$scope.graph = {};
$scope.graph.posts = data;

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

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

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

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

}

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

table thead td {
    font-weight:bold;
}

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