使用 ng-repeat {ANGULAR.JS} 加载 JSON 以显示数据 [英] Load JSON to display data, using ng-repeat {ANGULAR.JS}

问题描述

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

图表不显示，不知道为什么?我在控制台中也没有收到任何错误.

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

更新:我的 JSON 文件内容

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

    ]}
]

控制台日志:

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"

推荐答案

您的代码的问题是 json 是 Promise 对象，而不是从 AJAX 调用返回的数据.您的问题也有从 AJAX 请求返回"方面.确保您了解相关问题，非常检查 this热门问题.

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.

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

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

这篇关于使用 ng-repeat {ANGULAR.JS} 加载 JSON 以显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！