Разоблачение данных из http в Angular позволяет получить приватную область reuqest

0

Я - угловатый новичок, и я работаю над приложением, которое получает данные из бухгалтерского программного обеспечения и визуализирует разные вещи с помощью графиков Google.

Поскольку api бухгалтерского программного обеспечения не дает мне данных так, как мне это нужно, я должен обработать его, прежде чем передавать его в google-диаграммы api.

Нет проблемы, с которой я столкнулся, заключается в том, что я не могу получить доступ к данным, которые возвращаются внутри функции запроса HTTP-запроса из-за объема, который я предполагаю. Я пробовал немало вещей, но ничего не работает. Я чувствую, что должно быть очевидное решение этого, но я не могу на нее наложить.

Было бы здорово, если бы кто-то помог мне с помощью метода выставить данные 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";



}]);

Большое спасибо!

Теги:
scope
http
get

2 ответа

0
Лучший ответ

Проблема с вашим кодом заключается в том, что вы пытаетесь инициализировать свои диаграммы еще до завершения GET-вызова.

Несмотря на то, что в вашем коде первое место $http.get(), это асинхронная операция, поэтому интерпретатор JS не будет ждать завершения этого вызова. Он просто запустит вызов AJAX с помощью $ http.get() и продолжит работу с остальными инструкциями в коде, т.е. инициализацией Google Charts в вашем случае.

Когда ответ доступен, у нас есть обещания вызываться после завершения вашего вызова AJAX, и именно там вы идеологически должны инициализировать свои диаграммы, поскольку они зависят от ответа на вызов AJAX.

Сказав это, вы можете сделать эту работу, просто переведя инициализацию диаграмм на обратный вызов вашего второго запроса 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";
        });

    });
Поделиться
  • 0
    Большое спасибо за ответ! Это имеет большой смысл. Мой единственный вопрос по этому поводу: у меня есть второй контроллер с кодом диаграммы Google, который должен получить доступ к объекту data1. Поскольку теперь я переместил весь блок данных Google Charts в обратный вызов http, будет ли по-прежнему доступен вызов Google Charts?
  • 0
    Я не думаю, что это сработает. Если вам нужно обмениваться данными между двумя контроллерами, вам нужно использовать пользовательский сервис, как описано здесь (или) здесь . Надеюсь это поможет :)
Показать ещё 2 комментария
0

Я думаю, вы должны создать объект диаграммы google в последнем обещании http.

    //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}} со всей информацией.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню