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

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

javascript json angularjs

Javascript 如何使用angularjs在ng repeat中打印Json数据？,javascript,json,angularjs,Javascript,Json,Angularjs,如何使用ng repeat在angularjs中打印json数据。在ng repeat中，我只想打印例如“数据”：[{“y”：“23”，“x”：“12”}]请查看json数据。但它不会以html格式打印任何内容演示： 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,

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

演示：

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>

试一试

到

您的

Json

有效。您只是在

ng repeat

中做错了。以上代码片段适用于您的情况

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

由于

系列

是一个数组，请从

$scope.metrics=response.series.data;

 Metric: {{metric.data.x}}

到

和

是度量的属性。更新自

$scope.metrics=response.series.data;

 Metric: {{metric.data.x}}

到

根据数据的外观，使用“json”过滤器更容易。在您的情况下，可能需要执行

response.series[0].data如上所述，但一旦您有了想要用作数据的内容，它就应该简单到：
    Metric: <pre>{{metrics.series[0].data|json}}</pre>

使用：

您在上面编写的代码，即

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

您的$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) {
      /**
       * 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];
    });
});

app.controller（'ceilometerCtrl'，函数（$scope，$http）{
$http.get（“http://192.168.206.133:8080/admin/metering")
.成功（功能（响应）{
/**
*现在你的回答是
*3.0，x:“2015-2007-7-24T114 14:14 14:39“，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，“名称”：“演示”、“单元”：“实例”}]，“设置”：{}
*执行response.series将为您提供一个数组
*，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，“演示”，“单位”：“实例”}]
*首先，您必须迭代序列中的每个对象，然后迭代for循环中每个项的数据对象：）
* 
*   
*{{d.x}}

*{{d.y}}
*   
* 
*/
$scope.series=response.series；//应用ng重复两次，如上所述：）
});
});

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

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


{{d.x}}

{{d.y}}

案例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];
    });
});

从您的响应中获取第一个元素

app.controller（'ceilometerCtrl'，函数（$scope，$http）{
$http.get（“http://192.168.206.133:8080/admin/metering")
.成功（功能（响应）{
/**
*从响应中获取第一个元素（数组）将为您提供
*json对象，即。
*，，，，，，，，：，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，演示“单位“：“实例”}
*现在，您只需对数据系列进行迭代
* 
*{{d.x}}

*{{d.y}}
* 
*/
$scope.matrics=response.series[0]；
});
});

第二种情况下的html是


{{d.x}}

{{d.y}}

希望这能有所帮助。

这是一个对象数组。。请查看我按照与您相同的步骤进行的链接do@nikhil，再次看到问题，我试过了，但什么也没给，请看result@NeelabhSingh确保您使用的是

metric.x

而不是

matric.data.x

@nikhil请查看我在同一页后面的链接正如你告诉doYou的过程你没有注入$http。我已经更新了plunker。作为参考-请查看我想要使用的链接http@NeelabhSingh看上面。我没有解决你的人力车问题。你可以自己解决这个问题。

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

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

{{ your.data | json }}

$scope.metrics=response.series.data;

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

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

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

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