负载JSON来显示数据，采用NG-重复{} ANGULAR.JS [英] Load JSON to display data, using ng-repeat {ANGULAR.JS}

问题描述

我的HTML：

 ＆LT; D​​IV CLASS =图形显示NG控制器=jsonServerBox＆GT;
    ＆LT; D​​IV CLASS =条形图盒NG重复=模块中ocw.modules＆GT;
        ＆LT;帆布类=图图吧数据={{module.data}}标签={{module.labels}}系列={{module.series}}＆GT;＆LT; /帆布＆GT ;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

我的JS：

  app.controller（'jsonServerBox'，函数（$范围，$ HTTP）{
  VAR JSON = $ http.get（'serverbox.json'），然后（功能（RES）{
          返回res.data;
        }）;
  $ scope.ocw = json的;
    }）;
 

，图表不会被显示出来，不知道为什么？我没有得到任何错误控制台无论是。

更新：我的JSON文件中的内容。

  [{模块：
            {
               系列：SeriesA
               数据：90后，99，80后，91，76，75，60，67，59，55]
               标签：[01，02，03，04，05，06，07，08，09，10]
            }，            {
               系列：SeriesB
               数据：90后，99，80后，91，76，75，60，67，59，55]
               标签：[01，02，03，04，05，06，07，08，09，10]
            }    ]}
]
 

控制台日志：

 模块：数组[2] 0：目标数据：数组[10] 0：90后1992：80后3914：76 5756607：67859955长度：10__proto__：数组[0]标签：数组[10] 0：011：02 2：033044：055066077：08809910长度：10__proto__：数组[0]系列： SeriesA__ proto__：Object1：目标数据：数组[10] 0：90后1992：80后3914：765756607： 67859955长度：10__proto__：数组[0]标签：数组[10] 0：011：022：033044 055066077：08809910长度：10__proto__：数组[0]系列：SeriesB
 

解决方案

与code的问题是， JSON 是无极对象未将数据从AJAX返回呼叫。另外你的问题的方面，从AJAX请求返回。确保你了解相关的问题，检查<一href=\"http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call\">this非常流行的问题。

有道设置在角与AJAX请求检索范围的数据做内部则回调：

  app.controller（'jsonServerBox'，函数（$范围，$ HTTP）{
    $ http.get（'serverbox.json'），然后（功能（RES）{
        $ scope.ocw = res.data;
    }）;
}）;
 

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"

解决方案

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

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