Multiple HTTP Requests for an AngularJS + Google Sheets Prototype

As I continued to build out my AngularJS + Google Sheets prototype, I ran into another problem. I wanted to load the data from two Google Sheets and access the data in the same function. I created this example, which loads in one Sheet with weather forecasts and another with weather types and descriptions, as a proxy.

Because of the way I was completing the HTTP request of the initial Google Sheet data, the HTTP request was asynchronous. This meant that AngularJS had already run before I tried to store the data. So I needed to find another way to use both sets of data in the function.

After talking with a few friends, we were able to pull together a solution. It looked for each entry in the Google Sheet’s data, then returned that data into a single object. Using $q, it turns out that we can ask Angular to pull the data from each HTTP request, then return all of those requests into an object.

   
  var app = angular.module('myApp', []);
  app.controller('agencyCtrl', function($scope, $q, $http) {

    $scope.googleData =[];

    $q.all([
      $http.get(url1),
      $http.get(url2)
    ]).then(function(results) {
       /* enter your logic here */
       console.log(results);
    });
  });

We can specify the Google Sheets we want by changing the number before the “/1/public/“ section of the URL. Be careful when managing your Sheet tabs, as altering the order could break your prototype.

In my example, I put this code in the Controller. The results of each of the HTTP requests are saved to a single ‘results’ object. I created a $scope object called ‘$scope.googleData’ to store each of the results. The weather Sheet data can then be saved to the to ‘$scope.googleData.weather’.

For the weather condition types, I wanted to manipulate the data a little bit. I wanted a simple list of objects with the type name and the description. Once the data was in a more presentable form, it could be saved to ‘$scope.googleData.types’. This allowed us to access all of the Google Sheet data in both the View and in that controller’s function.

To show how that works in the function, we can console.log to view the data:

To show how it works in the View, we can output the data:

This can be helpful when you want to allow easy access to alter the data via the spreadsheet. For example, if we had a list of weather condition forecasts (Google Sheet #1), we could filter those based on our defined weather types (in Google Sheet #2). I could then group the weather reports by weather condition type in the function of the logic.


  

Weather

{{googleData.weather[0]}}

Types

{{googleData.types[0]}}
   
  var app = angular.module('myApp', []);
  app.controller('agencyCtrl', function($scope, $q, $http) {

    $scope.googleData =[];

    $q.all([
      $http.get('https://spreadsheets.google.com/feeds/list/1YG07Qm-WUn_xeJmdAidPSKi6kU6jKoAeTnCOrafdCeQ/1/public/values?alt=json'),
      $http.get('https://spreadsheets.google.com/feeds/list/1YG07Qm-WUn_xeJmdAidPSKi6kU6jKoAeTnCOrafdCeQ/2/public/values?alt=json')
    ]).then(function(results) {
       /* enter your logic here */

       /* store data from sheet 1  */
      $scope.googleData.weather = results[0].data.feed.entry;
      
      /* create data structure and store data from sheet 2  */
      weatherTypeData = results[1].data.feed.entry;

        var weatherTypes = [];

        angular.forEach(weatherTypeData, function(value, key){
          var newWeatherType = {
            'description' : value.gsx$description.$t,
            'name' : value.gsx$type.$t
          };
          weatherTypes.push(newWeatherType);
        });
        $scope.googleData.types = weatherTypes;
    });

    console.log($scope.googleData);

  });

For an example of using the data together in the View, we can filter the weather reports to only show the selected weather type from a drop-down.


  

Weather

{{googleData.weather[0]}}

Types

{{googleData.types[0]}}

Example:

filter: {{filterItem.types}}
{{weather.gsx$time.$t}} - {{weather.gsx$feelslike.$t}} - {{weather.gsx$conditions.$t}}

You can view a demo here.

This gives you nice easy access to your data via Google Sheets. If you are using Google Sheets + AngularJS for prototyping, please share a link to your prototype below. We would love to see what you’re making.