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

注意： FilePath不是问题。

Answer 1

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

$scope.chartObject.data = {} 

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

这是因为您不能直接将Promise（$ http.get返回的对象）设置为作用域中的对象，因为它是异步的。

Answer 2

将您的代码更改为此

$ scope.chartObject = {};

     $scope.chartObject.data = {} 

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

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

希望更好的代码对您有用。谢谢。

Angular JS使用JSON数据

4 个答案: