Load JSON to display data, using ng-repeat {ANGULAR.JS}

Question

My Html:

<div class="graph-display" ng-controller="jsonServerBox">
    <div class="bar-chart-box" ng-repeat="module in ocw.modules"> 
        <canvas class="chart chart-bar" data="{{module.data}}" labels="{{module.labels}}" series="{{module.series}}"></canvas>
    </div>
</div>

My JS:

app.controller('jsonServerBox', function($scope, $http) {
  var json = $http.get('serverbox.json').then(function(res){
          return res.data;
        });
  $scope.ocw = json;    
    });

The Chart doesn't gets displayed, don't know why? I'm not getting any error in console either.

UPDATE: MY JSON FILES CONTENT

[{"modules":[
            {
               "series":"SeriesA",
               "data":["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"],
               "labels":["01", "02", "03", "04", "05", "06", "07","08","09","10"]
            },

            {
               "series":"SeriesB",
               "data":["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"],
               "labels":["01", "02", "03", "04", "05", "06", "07","08","09","10"]
            }

    ]}
]

CONSOLE LOG:

modules: Array[2]0: Objectdata: Array[10]0: "90"1: "99"2: "80"3: "91"4: "76"5: "75"6: "60"7: "67"8: "59"9: "55"length: 10__proto__: Array[0]labels: Array[10]0: "01"1: "02"2: "03"3: "04"4: "05"5: "06"6: "07"7: "08"8: "09"9: "10"length: 10__proto__: Array[0]series: "SeriesA"__proto__: Object1: Objectdata: Array[10]0: "90"1: "99"2: "80"3: "91"4: "76"5: "75"6: "60"7: "67"8: "59"9: "55"length: 10__proto__: Array[0]labels: Array[10]0: "01"1: "02"2: "03"3: "04"4: "05"5: "06"6: "07"7: "08"8: "09"9: "10"length: 10__proto__: Array[0]series: "SeriesB"

It's not showing up because you are getting the data after the chart renders. So you need something to update the chart once the data actually loads in. I'm assuming the chart is some sort of library, so the normal angular $digest will not update the variables you give to the chart. — ribsies, Feb 02 '15 at 20:07

score 5 · Accepted Answer · edited May 23 '17 at 12:32

5

The problem with your code is that json is Promise object not the data returned from AJAX call. Also your question has "returning from AJAX request" aspect. Make sure you understand related problem, check this very popular question.

Proper way to set scope data retrieved with AJAX request in Angular is to do it inside then callback:

app.controller('jsonServerBox', function ($scope, $http) {
    $http.get('serverbox.json').then(function (res) {
        $scope.ocw = res.data;
    });
});

edited May 23 '17 at 12:32

Community

1
1

answered Feb 02 '15 at 12:56

dfsq

191,768
25
236
258

Tried your suggestion, But still chart is not getting rendered. May be there's some issue in my JSON DATA FORMAT. Posting it in my Question. PLease have a look. – Amit Singh Feb 02 '15 at 13:05
Put `{{ocw}}` below canvas and see if it gets populated. If so, then the problem is with chart library which doesn't update when data changes. – dfsq Feb 02 '15 at 13:08
Sure will try, I have tested the chart library and its working fine. – Amit Singh Feb 02 '15 at 13:11
Not sure but looks like your data should be one dimensional array? – dfsq Feb 02 '15 at 13:13
Nope putting {{ocw}} below canvas doesn't gets it populated. – Amit Singh Feb 02 '15 at 13:28
Then check the structure of `console.log(res)` inside `then`. Does it have `data` property? – dfsq Feb 02 '15 at 13:30
Done that, posted the console log. – Amit Singh Feb 02 '15 at 13:49

score 4 · Answer 2 · answered Feb 02 '15 at 13:00

4

In you case json variable is nothing but it contains promise object.

And Promise should always be resolve using .then

CODE

var json = $http.get('serverbox.json').then(function(res) {
    return res.data;
});
json.then(
  //success callback
  function(data) {
      $scope.ocw = data
  },
  //error callback
  function() {
      //error handling
  })
});

This would help you.

Thanks.

answered Feb 02 '15 at 13:00

Pankaj Parkar

134,766
23
234
299

@sanki Why there is array inside array `"data":[["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"]],` ? single array should be fine enough like `"data":[["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"]`.. – Pankaj Parkar Feb 02 '15 at 13:31
@sanki If you want, you can accept my this answer too, as per http://stackoverflow.com/questions/28278096/angular-js-loading-data-for-chart/28278459#28278459 issue has been resolved for json – Pankaj Parkar Feb 03 '15 at 13:16
@sanki Thats cool thing..let me know once you update your question..Thanks – Pankaj Parkar Feb 03 '15 at 13:35
@sanki I've heard that you are going to raise bounty for it :p – Pankaj Parkar Feb 06 '15 at 09:37

Load JSON to display data, using ng-repeat {ANGULAR.JS}

2 Answers2

Linked