Angular JS 使用 JSON 数据

Question

我正在使用 https://github.com/bouil/angular-google-chart 进行数据可视化。

我需要从 JSON 文件中获取数据。

下面是负责在 html 页面上显示数据的片段：

$scope.chartObject.data = {"cols": [
        {id: "t", label: "Topping", type: "string"},
        {id: "s", label: "Slices", type: "number"}
    ], "rows": [
        {c: [
            {v: "Mushrooms"},
            {v: 3},
        ]},
        {c: $scope.onions},
        {c: [
            {v: "Olives"},
            {v: 31}
        ]},
        {c: [
            {v: "Zucchini"},
            {v: 1},
        ]},
        {c: [
            {v: "Pepperoni"},
            {v: 2},
        ]}
    ]};

我改成了：

    $scope.chartObject.data = function(){
    $http.get('data.json').always(function(response) {
    return response.data;
    });
    }

我的控制台抛出以下错误：

Object {id: "google-visualization-errors-0", message: "Table has no columns.", detailedMessage: "", options: Object}

我的 data.json 文件如下所示：

{
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
      ]
}

注意： 文件路径在这里不是问题。

Answer 1

把你的代码改成这个

$scope.chartObject = {};

     $scope.chartObject.data = {} 

$http.get('data.json').then(function(response) {
    $scope.chartObject.data = response.data;
});

Answer 2

您将 $http 请求响应设置为 $scope 对象的方式有问题。将其更改为：

$scope.chartObject.data = {} 

$http.get('data.json').then(function(response) {
    $scope.chartObject.data = response.data;
});

这是因为你不能直接将 Promise（$http.get returns 的对象）设置为你范围内的对象，因为它是异步的。

Answer 3

用这个。此外，您还需要在控制器上添加 $http 依赖项。

$http.get(url).success(function(data){
return data;
}).error(function(data){
})

Answer 4

最好使用工厂然后从任何地方使用它。

服务

app.factory('dataService', function($http){
    var getData = function(){
         return $http.get('data.json');
    }
    return {
        getData: getData
    }               
});

在使用它之前不要忘记在你的控制器中添加服务依赖。

控制器代码

$scope.chartObject = {}; //do this if chartObject is not initialized
dataService.getData().then(function(response) {
    $scope.chartObject.data = response.data;
});

希望更好的代码适用于 you.Thanks。

Angular JS 使用 JSON 数据

Angular JS Working with JSON Data

json

google-visualization

angularjs