Question

我是一个有角度的新手，我正在开发一个应用程序，它可以从会计软件中获取数据，并使用谷歌图表可视化不同的东西。

由于会计软件的api没有按照我需要的方式提供数据，因此我必须在将其传递给google chart api之前对其进行处理。

我遇到的问题是我无法访问由http范围引起的http get请求函数内部返回的数据。我尝试过很多东西，但似乎没什么用。我觉得应该有一个明显的解决方案，但不能把手指放在上面。

如果有人可以帮我提供一个方法来公开http请求数据，使其在http函数本身之外可用，那将会很棒。这是一个代码示例：

    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";



}]);

非常感谢！

Answer 1

我认为您应该在最后一个http承诺中创建Google图表对象。

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

    });

现在，您应该可以使用所有信息访问模板{{data1}}。

Answer 2

您的代码存在的问题是，即使在您的GET通话完成之前，您仍尝试初始化图表。

即使看起来$http.get()在代码中排在第一位，它也是异步操作，因此JS解释器不会等待该调用完成。它将简单地使用$ http.get（）激活AJAX调用，并继续使用代码中的其余语句，即您的情况下的Google Charts初始化。

当响应可用时，我们承诺在完成您的AJAX调用后调用，这是理想情况下您应该初始化图表，因为它们依赖于AJAX调用响应。< / p>

话虽如此，你可以通过简单地将图表初始化移动到第二个GET请求的回调来完成这项工作，如下所示。

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

    });

从Angular的http公开数据获得reuqest的私有范围

2 个答案: