Angular JS Working with JSON Data

Question

I am using https://github.com/bouil/angular-google-chart for Data Visualization.

I need to get data from JSON file.

Below is the snippet which was responsible for data display on html page:

$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},
        ]}
    ]};

I changed it to:

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

And my console throws following error :

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

My data.json file looks like:

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

NOTE: FilePath is not a problem here.

Ricconnect · Accepted Answer · 2015-01-27 13:59:10Z

2

There is something wrong about the way that you set the $http request response to your $scope object. Change it to:

$scope.chartObject.data = {} 

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

This is because you cannot directly set a Promise (the object that $http.get returns) to a object in your scope, because it is async.

answered Jan 27, 2015 at 13:59

Ricconnect

1,0795 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amit Singh Over a year ago

This worked fine, I needed to pass " $http" as parameter in my controller. Thanks

dhavalcengg · Accepted Answer · 2015-01-27 14:10:22Z

1

Change you code to this

$scope.chartObject = {};

     $scope.chartObject.data = {} 

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

edited Jan 27, 2015 at 14:10

answered Jan 27, 2015 at 13:57

dhavalcengg

4,7131 gold badge20 silver badges26 bronze badges

1 Comment

dhavalcengg Over a year ago

pass $http in your controller parameter

Arindam Barman · Accepted Answer · 2015-01-27 14:24:29Z

1

Use this. Also you will need add $http dependency on the controller.

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

answered Jan 27, 2015 at 14:24

Arindam Barman

10710 bronze badges

Comments

Pankaj Parkar · Accepted Answer · 2015-01-27 14:53:08Z

1

Better you use factory Then consume it from anywhere.

Service

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

Before using it don't forget to add dependency of service inside your controller.

Controller Code

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

Hope better code will work for you.Thanks.

answered Jan 27, 2015 at 14:53

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Collectives™ on Stack Overflow

Angular JS Working with JSON Data

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related