How to print Json data in ng-repeat using angularjs?

Question

How to print the json data in angularjs using ng-repeat. In ng-repeat I only want to print for example "data": [{"y":"23","x": "12"}] please see the json data. But it print nothing in html.

Demo: http://plnkr.co/edit/zy1C2z39dXuuHDx8eqxK?p=preview

JSON Data

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

Result nothing is printing

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

Nikhil Aggarwal · Accepted Answer · 2015-07-27 16:08:08Z

2

You need to make 2 changes in your code.

As series is an array, update from
```
$scope.metrics=response.series.data;
```

to

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

x and y are properties of metric. Update from
```
 Metric: {{metric.data.x}}
```

to

 Metric: {{metric.x}}

answered Jul 27, 2015 at 16:08

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

geeks Over a year ago

@nikhil, see the question again, I tried but is giving nothing, plz see the result

Vineet Over a year ago

@NeelabhSingh Make sure you're using metric.x instead matric.data.x

geeks Over a year ago

@nikhil please see the link plnkr.co/edit/zy1C2z39dXuuHDx8eqxK?p=preview I followed same procedure as you told to do

Nikhil Aggarwal Over a year ago

You did not injected $http. I have updated the plunker. For reference - plnkr.co/edit/zLuDs84IdmRxmKjrwsk8?p=preview

Vineet · Accepted Answer · 2015-07-27 16:15:02Z

1

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. You were only doing wrong in ng-repeat. Above snippet will work in your case.

edited Jul 27, 2015 at 16:15

answered Jul 27, 2015 at 16:00

Vineet

4,7153 gold badges25 silver badges42 bronze badges

2 Comments

Vineet Over a year ago

It is an array of objects.

geeks Over a year ago

please see the link plnkr.co/edit/zy1C2z39dXuuHDx8eqxK?p=preview I followed same procedure as you told to do

Joy · Accepted Answer · 2015-07-27 16:47:08Z

0

Use filter json:

{{ your.data | json }}

answered Jul 27, 2015 at 16:47

Joy

9,60011 gold badges49 silver badges99 bronze badges

Comments

Yousuf Jawwad · Accepted Answer · 2015-07-27 17:19:19Z

The code that you have written above i.e.

$scope.metrics=response.series.data;

your $scope.metrics will be undefined, since response.series is an array, not a JSON object.

There are two approaches that can be applied

Case 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

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

Case 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

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

hope this helps.

Nix · Accepted Answer · 2015-07-28 16:01:30Z

0

Its easier than that depending on what your data looks like just use the "json" filter. In your case you might need to do 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/

Updated per your request. Your plunkr was broken. The d3 reference was missing d3.time I updated it to a temporary one. Next up was RickSha was throwing an error. I moved $scope.series above the new RickShaw and was able to get the pre to work. Updated fiddle: http://plnkr.co/edit/iMB4ElKqfAlM0wdyqpA7?p=preview

Code required:

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

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

edited Jul 28, 2015 at 16:01

answered Jul 27, 2015 at 16:09

Nix

58.8k31 gold badges154 silver badges205 bronze badges

2 Comments

geeks Over a year ago

please see the link plnkr.co/edit/zy1C2z39dXuuHDx8eqxK?p=preview I want to use http

Nix Over a year ago

@NeelabhSingh see above . I did not fix your rickshaw issue. you can figure that one out on your own.

Collectives™ on Stack Overflow

How to print Json data in ng-repeat using angularjs?

5 Answers 5

4 Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related