使用ng-repeat加载JSON以显示数据{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

更新:我的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"]
            }

    ]}
]

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"

2 个解决方案

#1

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.

您的代码的问题是json是Promise对象而不是从AJAX调用返回的数据。此外,您的问题是“从AJAX请求返回”方面。确保您了解相关问题,请查看这个非常受欢迎的问题。

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

在Angular中使用AJAX请求设置范围数据的正确方法是在回调内部进行:

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

#2

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

在你的情况下,json变量只是它包含promise对象。

And Promise should always be resolve using .then

并且应该始终使用.then解决Promise

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.

#1