Exposing data from Angular's http get reuqest's private scope

Question

I am an angular novice and am working on an app that gets data from an accounting software and visualises different things using google charts.

Since the api of the accounting software doesn't give me the data the way I need it I have to process it before passing it to the google charts api.

No the problem I ran into is that I can't access the data that is returned inside of the http get request function due to scope I guess. I have tried quite a few things, but nothing seems to work. I feel like there should be an obvious solution to this, but can't put my finger on it.

Would be great if someone can help me with a method to expose http request data to make it usable outside of the http function itself. Here is a code example:

    myApp.controller("dataFetch", ['$http', '$scope',function($http, $scope){

    var self = this;
    self.project = {};
    self.TSproject;
    self.TShours;


    //PASSING AUTHORIZATION
    var config = { headers: { 'Authorization': 'Bearer 1lFASlwgM3QwSyZfJVJPO6776X5wlZtogdg8RN-Lt',} };

    //GET DATA
    $http.get('https://api.freeagent.com/v2/projects/941562', config).then(function(response) {

        //SAVING PROJECT DATA
        self.project = {
            name: response.data.project.name,
            url: response.data.project.url
        };
        return self.project.url;

    }, function(errResponse) {
        console.error("Get project request failed");
    }).then(function(pUrl) {
        return
        $http.get('https://api.freeagent.com/v2/timeslips?' + 'from_date=2015-09-21&to_date=2015-09-28' + 'user=' + pUrl, config).then(function(response) {
            self.TSproject = response.data.timeslips[0].project;
            self.TShours = response.data.timeslips[0].hours;
        });

    });
    //GOOGLE CHARTS  
    $scope.data1 = {};
    $scope.data1.dataTable = new google.visualization.DataTable();
    $scope.data1.dataTable.addColumn("string","User")
    $scope.data1.dataTable.addColumn("number","Qty")

    //INSERTING DATA FROM SERVER HERE
    $scope.data1.dataTable.addRow([self.TSproject, self.TShours]);
    $scope.data1.title="Daniels Timeslips";



}]);

Thanks a lot!

score 0 · Answer 1 · answered Sep 29 '15 at 10:25

I think you should create the google chart object inside the last http promise.

    //GET DATA
    $http.get('https://api.freeagent.com/v2/projects/941562', config).then(function(response) {

        //SAVING PROJECT DATA
        self.project = {
            name: response.data.project.name,
            url: response.data.project.url
        };
        return self.project.url;

    }, function(errResponse) {
        console.error("Get project request failed");
    }).then(function(pUrl) {
        return
        $http.get('https://api.freeagent.com/v2/timeslips?' + 'from_date=2015-09-21&to_date=2015-09-28' + 'user=' + pUrl, config).then(function(response) {
            self.TSproject = response.data.timeslips[0].project;
            self.TShours = response.data.timeslips[0].hours;

            //GOOGLE CHARTS  
            $scope.data1 = {};
            $scope.data1.dataTable = new google.visualization.DataTable();
            $scope.data1.dataTable.addColumn("string","User")
            $scope.data1.dataTable.addColumn("number","Qty")

            //INSERTING DATA FROM SERVER HERE
            $scope.data1.dataTable.addRow([self.TSproject, self.TShours]);
            $scope.data1.title="Daniels Timeslips";
        });

    });

Now you should be able to access in your template {{ data1 }} with all the info.

Arkantos · Accepted Answer · 2015-09-29T10:42:22.293

The problem with your code is that you're trying to initialize your charts even before your GET call is complete.

Even though it looks like $http.get() comes first in your code, it's an Asynchronous operation, so JS interpreter will not wait for that call to complete. It will simply fire the AJAX call using $http.get() and continue with the remaining statements in code i.e Google Charts initialization in your case.

When the response is available, we have promises to be invoked after completion of your AJAX call and that is where you're ideally supposed to initialize your charts as they're dependent on that AJAX call response.

Having said that, you can make this work by simply moving your charts initialization to the callback of your second GET request like below.

   $http.get('https://api.freeagent.com/v2/projects/941562', config).then(function(response) {
      // removing your code for brewity
    }, function(errResponse) {
        console.error("Get project request failed");
    }).then(function(pUrl) {

        $http.get('https://api.freeagent.com/v2/timeslips?' + 'from_date=2015-09-21&to_date=2015-09-28' + 'user=' + pUrl, config).then(function(response) {
            self.TSproject = response.data.timeslips[0].project;
            self.TShours = response.data.timeslips[0].hours;

          //GOOGLE CHARTS  
          $scope.data1 = {};
          $scope.data1.dataTable = new google.visualization.DataTable();
          $scope.data1.dataTable.addColumn("string","User")
          $scope.data1.dataTable.addColumn("number","Qty")

          //INSERTING DATA FROM SERVER HERE
          $scope.data1.dataTable.addRow([self.TSproject, self.TShours]);
          $scope.data1.title="Daniels Timeslips";
        });

    });

Thanks a lot for you answer! That makes a lot of sense. My only question about that would be: I have a second controller with the google chart code that needs to access the data1 object. Since I now moved the whole google charts data block into the http callback, will the google charts call still be able to access this? — Anton, Sep 29 '15 at 11:37
I don't think that it will work. If you need to share data between two controllers, you need to make use of a custom service as explained [here](http://stackoverflow.com/questions/21919962/angular-share-data-between-controllers#21920241) (or) [here](https://thinkster.io/a-better-way-to-learn-angularjs/services). Hope this helps :) — Arkantos, Sep 29 '15 at 11:42
If my answer helped in resolving your issue, please upvote and accept :) — Arkantos, Sep 29 '15 at 14:09

Exposing data from Angular's http get reuqest's private scope

2 Answers2