Question

如何使用ng-repeat在angularjs中打印json数据。在ng-repeat中我只想打印例如“data”：[{“y”：“23”，“x”：“12”}] 请查看json数据。但它在html中没有打印任何内容。

演示：http://plnkr.co/edit/zy1C2z39dXuuHDx8eqxK?p=preview

JSON数据

{"series": [{"meter": "instance", "data": [{"y": 1.0, "x": "2015-07-21T14:21:33"}, {"y": 1.0, "x": "2015-07-22T14:21:34"}, {"y": 1.0, "x": "2015-07-23T14:21:34"}, {"y": 1.0, "x": "2015-07-24T14:23:39"}, {"y": 1.0, "x": "2015-07-25T14:23:39"}, {"y": 1.0, "x": "2015-07-26T02:43:39"}, {"y": 1.0, "x": "2015-07-27T14:24:33"}], "name": "demo", "unit": "instance"}], "settings": {}}

Angularjs

 app.controller('ceilometerCtrl', function($scope, $http) {
 $http.get("http://192.168.206.133:8080/admin/metering")
      .success(function(response) {                    
         $scope.metrics=response.series[0].data;              
       });
 });

HTML

<div ng-controller="ceilometerCtrl">
    <div ng-repeat="metric in metrics">
        Metric: {{metric.x}}
    </div>
</div>

结果没有任何内容正在打印

Metric:
Metric:
Metric:
Metric:
Metric:
Metric:
Metric:

Answer 1

您需要在代码中进行2次更改。

由于series是一个数组，请从
更新
```
$scope.metrics=response.series.data;
```

到

$scope.metrics=response.series[0].data;

x和y是指标的属性。从
更新
```
 Metric: {{metric.data.x}}
```

到

 Metric: {{metric.x}}

Answer 2

尝试

    <div ng-repeat="metric in metrics">
      Metric X :  {{metric.x}}
      Metric Y :  {{metric.y}}
   </div>

并在控制器中。改变这一行

$scope.metrics=response.series.data;

到

$scope.metrics=response.series[0].data;

您的Json有效。你只是在ng-repeat做错了。上面的代码片段适用于您的情况。

Answer 3

这比根据您的数据看起来更容易，只需使用＆＃34; json＆＃34;过滤。在您的情况下，您可能需要执行上面提到的response.series[0].data;，但是一旦您拥有了想要用作数据的内容，它就应该如下所示：

    Metric: <pre>{{metrics.series[0].data|json}}</pre>

简单的小提示：http://jsfiddle.net/hLf1rLxz/

根据您的要求更新。你的傻瓜被打破了。缺少d3参考d3.time我将其更新为临时参考。接下来是RickSha抛出错误。我将$ scope.series移到了new RickShaw之上，并且能够让pre-to工作。更新了小提琴：http://plnkr.co/edit/iMB4ElKqfAlM0wdyqpA7?p=preview

所需代码：

<body ng-controller="MainCtrl">
   <pre>{{metrics | json}}</pre>

   <div id="chart"></div>
 </body>

Answer 4

使用filter json：

{{ your.data | json }}

Answer 5

您在上面写的代码，即

$scope.metrics=response.series.data;

你的$ scope.metrics将是未定义的，因为response.series是一个数组，而不是一个JSON对象。

有两种方法可以应用

案例1：

app.controller('ceilometerCtrl', function($scope, $http) {

  $http.get("http://192.168.206.133:8080/admin/metering")
    .success(function(response) {
      /**
       * now your response is
       * {"series": [{"meter": "instance", "data": [{"y": 1.0, "x": "2015-07-21T14:21:33"}, {"y": 1.0, "x": "2015-07-22T14:21:34"}, {"y": 1.0, "x": "2015-07-23T14:21:34"}, {"y": 1.0, "x": "2015-07-24T14:23:39"}, {"y": 1.0, "x": "2015-07-25T14:23:39"}, {"y": 1.0, "x": "2015-07-26T02:43:39"}, {"y": 1.0, "x": "2015-07-27T14:24:33"}], "name": "demo", "unit": "instance"}], "settings": {}}
       * doing response.series will give you an array
       * [{"meter": "instance","data": [{  "y": 1.0,  "x": "2015-07-21T14:21:33"}, {  "y": 1.0,  "x": "2015-07-22T14:21:34"}, {  "y": 1.0,  "x": "2015-07-23T14:21:34"}, {  "y": 1.0,  "x": "2015-07-24T14:23:39"}, {  "y": 1.0,  "x": "2015-07-25T14:23:39"}, {  "y": 1.0,  "x": "2015-07-26T02:43:39"}, {  "y": 1.0,  "x": "2015-07-27T14:24:33"}],"name": "demo","unit": "instance"}]
       * first you will have to iterate over each object of a series. and then iterate over data object from each item on the for loop :) 
       * <div ng-repeat="s in series">
       *   <div ng-repeat="d in s.data">
       *     {{ d.x }} <br />
       *     {{ d.y }}
       *   </div>
       * </div>
       */
      $scope.series = response.series; // apply the ng-repeat twice, as described above :)
    });
});

如果你是复制粘贴，这将是你的HTML

<div ng-repeat="s in series">
  <div ng-repeat="d in s.data">
    {{ d.x }} <br />
    {{ d.y }}
  </div>
</div>

案例2：

从您的回复中获取第一个元素

app.controller('ceilometerCtrl', function($scope, $http) {
  $http.get("http://192.168.206.133:8080/admin/metering")
    .success(function(response) {
      /**
       * getting the first element from the response, which is an array, will give you
       * a json object i.e.
       * { "meter": "instance","data": [{  "y": 1.0,  "x": "2015-07-21T14:21:33"}, {  "y": 1.0,  "x": "2015-07-22T14:21:34"}, {  "y": 1.0,  "x": "2015-07-23T14:21:34"}, {  "y": 1.0,  "x": "2015-07-24T14:23:39"}, {  "y": 1.0,  "x": "2015-07-25T14:23:39"}, {  "y": 1.0,  "x": "2015-07-26T02:43:39"}, {  "y": 1.0,  "x": "2015-07-27T14:24:33"}],"name": "demo","unit": "instance" }
       * now you just iterate of the data series
       * <div ng-repeat="d in matrics.data">
       *     {{ d.x }} <br />
       *     {{ d.y }}
       * </div>
       */
      $scope.matrics = response.series[0];
    });
});

第二种情况下的html只是

<div ng-repeat="d in matrics.data">
  {{ d.x }} <br />
  {{ d.y }}
</div>

希望这会有所帮助。

如何使用angularjs在ng-repeat中打印Json数据？

5 个答案: