CODEWITHSUNDEEP
javascriptjsonangularjs
geeks
geeks

Reputation: 2055

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

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:

Upvotes: 2

Views: 3917

Answers (5)

Nix
Nix

Reputation: 58522

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>

Upvotes: 0

Yousuf Jawwad
Yousuf Jawwad

Reputation: 3097

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.

Upvotes: 0

Joy
Joy

Reputation: 9550

Use filter json:

{{ your.data | json }}

Upvotes: 0

Vineet
Vineet

Reputation: 4635

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.

Upvotes: 1

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28445

You need to make 2 changes in your code.

  1. As series is an array, update from

    $scope.metrics=response.series.data;

to

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

  1. x and y are properties of metric. Update from

     Metric: {{metric.data.x}}

to

 Metric: {{metric.x}}

Upvotes: 2

Related Questions