CODEWITHSUNDEEP
angularjschart.js
Amit Singh
Amit Singh

Reputation: 2275

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

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"

Upvotes: 6

Views: 10837

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

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.

Upvotes: 4

dfsq
dfsq

Reputation: 193261

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;
    });
});

Upvotes: 5

Related Questions