Загрузите JSON для отображения данных, используя ng-repeat {ANGULAR.JS}

Question

Мой 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>

Мой JS:

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

Диаграмма не отображается, не знаете почему? Я не получаю никаких ошибок в консоли.

ОБНОВЛЕНИЕ: МОЙ JSON ФАЙЛЫ КОНТЕНТ

[{"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"]
            }

    ]}
]

ЖУРНАЛ КОНСОЛИ:

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"

Answer 1

Проблема с вашим кодом в том, что json Объект Promise - это не данные, возвращаемые при вызове AJAX. Также ваш вопрос имеет аспект "возвращение из запроса AJAX". Убедитесь, что вы понимаете связанную проблему, проверьте этот очень популярный вопрос.

Правильный способ установить данные области, полученные с помощью AJAX-запроса в Angular, - сделать это внутри, а затем вызвать обратный вызов:

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

Answer 2

В твоем случае json переменная ничего, но она содержит объект обещания.

И обещание всегда должно быть решено с помощью .then

КОД

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

Это поможет вам.

Благодарю.