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
– ribsies, Commented Feb 2, 2015 at 20:07

Community · Accepted Answer · 2017-05-23 12:32:55Z

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, 2017 at 12:32

CommunityBot

11 silver badge

answered Feb 2, 2015 at 12:56

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

7 Comments

Amit Singh Over a year ago

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.

dfsq Over a year ago

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.

Amit Singh Over a year ago

Sure will try, I have tested the chart library and its working fine.

dfsq Over a year ago

Not sure but looks like your data should be one dimensional array?

Amit Singh Over a year ago

Nope putting {{ocw}} below canvas doesn't gets it populated.

|

Pankaj Parkar · Accepted Answer · 2015-02-02 13:00:50Z

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 2, 2015 at 13:00

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

4 Comments

Pankaj Parkar Over a year ago

@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 Over a year ago

@sanki If you want, you can accept my this answer too, as per stackoverflow.com/questions/28278096/… issue has been resolved for json

Pankaj Parkar Over a year ago

@sanki Thats cool thing..let me know once you update your question..Thanks

Pankaj Parkar Over a year ago

@sanki I've heard that you are going to raise bounty for it :p

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related