如何使用angularjs在ng-repeat中打印Json数据？
[英]How to print Json data in ng-repeat using angularjs?
问题描述
How to print the json data in angularjs using ng-repeat. 
如何使用ng-repeat在angularjs中打印json数据。 In ng-repeat I only want to print for example "data": [{"y":"23","x": "12"}] please see the json data. 在ng-repeat中，我只想打印例如“ data”：[{“ y”：“ 23”，“ x”：“ 12”}]，请参阅json数据。 But it print nothing in html. 但它不会在html中打印任何内容。
Demo : http://plnkr.co/edit/zy1C2z39dXuuHDx8eqxK?p=preview 演示 ： http : //plnkr.co/edit/zy1C2z39dXuuHDx8eqxK?p=preview
JSON Data 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 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 HTML
<div ng-controller="ceilometerCtrl">
<div ng-repeat="metric in metrics">
Metric: {{metric.x}}
</div>
</div>
Result nothing is printing 结果没有打印
Metric:
Metric:
Metric:
Metric:
Metric:
Metric:
Metric:
5 个解决方案
解决方案1
2 已采纳 2015-07-27 16:08:08
You need to make 2 changes in your code. 您需要在代码中进行2次更改。
As
seriesis an array, update from由于series是一个数组，因此从$scope.metrics=response.series.data;
to 至
$scope.metrics=response.series[0].data;
xandyare properties of metric.x和y是指标的属性。 Update from从更新 Metric: {{metric.data.x}}
to 至
Metric: {{metric.x}}
解决方案2
1 2015-07-27 16:00:34
Try 尝试
<div ng-repeat="metric in metrics">
Metric X : {{metric.x}}
Metric Y : {{metric.y}}
</div>
and in controller. 并在控制器中。 Change this line 更改此行
$scope.metrics=response.series.data;
to 至
$scope.metrics=response.series[0].data;
Your Json is valid. 您的Json有效。 You were only doing wrong in ng-repeat . 您只是在ng-repeat做错了。 Above snippet will work in your case. 上面的代码段将适合您的情况。
解决方案3
0 2015-07-27 16:09:11
Its easier than that depending on what your data looks like just use the "json" filter. 它比根据您的数据看起来更简单，只需使用“ json”过滤器即可。 In your case you might need to do response.series[0].data; 在您的情况下，您可能需要执行response.series[0].data; as mentioned above but once you have what you want to use as data it should be as simple as: 如上所述，但是一旦有了要用作数据的内容，它就应该很简单：
Metric: <pre>{{metrics.series[0].data|json}}</pre>
Simple fiddle showing : http://jsfiddle.net/hLf1rLxz/ 显示简单的小提琴： http : //jsfiddle.net/hLf1rLxz/
Updated per your request. 根据您的要求更新。 Your plunkr was broken. 你的朋克坏了。 The d3 reference was missing d3.time I updated it to a temporary one. d3参考缺少d3.time，我将其更新为临时参考。 Next up was RickSha was throwing an error. 接下来是RickSha抛出错误。 I moved $scope.series above the new RickShaw and was able to get the pre to work. 我将$ scope.series移到了new RickShaw RickShaw上方，并且能够开始工作。 Updated fiddle: http://plnkr.co/edit/iMB4ElKqfAlM0wdyqpA7?p=preview 更新的提琴： http : //plnkr.co/edit/iMB4ElKqfAlM0wdyqpA7?p=preview
Code required: 所需代码：
<body ng-controller="MainCtrl">
<pre>{{metrics | json}}</pre>
<div id="chart"></div>
</body>
解决方案4
0 2015-07-27 16:47:08
使用过滤器json ：
{{ your.data | json }}
解决方案5
0 2015-07-27 17:19:19
The code that you have written above ie 您上面编写的代码，即
$scope.metrics=response.series.data;
your $scope.metrics will be undefined, since response.series is an array, not a JSON object. 您的$ scope.metrics将是未定义的，因为response.series是一个数组，而不是JSON对象。
There are two approaches that can be applied 有两种方法可以应用
Case 1: 情况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 :)
});
});
if you are into copy-paste, this will be your html 如果您要复制粘贴，这将是您的html
<div ng-repeat="s in series">
<div ng-repeat="d in s.data">
{{ d.x }} <br />
{{ d.y }}
</div>
</div>
Case 2: 情况2：
Get the first element from your response 从响应中获取第一个要素
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];
});
});
the html in second case would simply be 在第二种情况下的HTML将只是
<div ng-repeat="d in matrics.data">
{{ d.x }} <br />
{{ d.y }}
</div>
hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.