How to create an array of Json objects from multiple Get Requests in Angular

Question

I'm doing a project for school where we have to connect to an API and grab some data. My classmate and I are trying to connect to Imgur with their API and pull back information about images on the first 100 pages, basically trend analysis. From what I can tell Imgur's API only lets you access information for one page at a time so I've put the http get into a for loop that will go through the first 100 pages. To analyze this data we need it to be put into an array that we can then pull from. We have something like this so far:

app.service("dataGrab", function($http){
  this.getPages = function() {
    var pageData = new Array();

      for(var i=0; i < 3; i++) {
    var imgurl = "https://api.imgur.com/3/gallery/hot/viral/" + i + ".json";
    $http({
        headers: {'Authorization': 'Client-ID 55f28598b46e0fa'},
        method: 'GET',
        url: imgurl
    }).then(function successCallback(response) {
        $.each(response, function(i){
        pageData.push(response[i]);
      })
      alert(pageData.length);
    }, function errorCallback(response) {
        console.log("Failed to call get on " + imgurl);

    });
  };
    return pageData;

  }
});

app.controller("imgurCtrl", function($scope, $http, dataGrab) {
    $scope.test = "This is a test";
    $scope.imgurData = dataGrab.getPages();
    console.log($scope.imgurData);




});

What'd I'd ideally like is for each JSON object to be returned into the array but instead we get this which I don't fully understand:

    [Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object, Object, Object, Object, Object, Object, Object, Object, Object,
 Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object,
 Object, Object, Object, Object, Object, Object, Object, Object, Object, Object,
 Object]0: Object1: Object2: Object$$hashKey: "object:5"account_id: ********* 
account_url: "******"animated: truebandwidth: ******comment_count: 167datetime: 
*********description: nulldowns: 108favorite: falsegifv: "******"height: 1284id: 
"*************"in_gallery: trueis_ad: falseis_album: falselink: 
"***********"looping: truemp4: "**********"mp4_size: 870041nsfw: falsepoints:
 5594score: 5784section: "gifs"size: 8022766title: "*********"topic: 
"******"topic_id: 5type: "image/gif"ups: 5702views: 382017vote: nullwidth: 720__proto__: Object3: Object4: Object5: Object6: Object7: Object8: Object9: 
Object10: Object11: Object12: Object13: Object14: Object15: Object16: Object17: 
Object18: Object19: Object20: Object21: Object22: Object23: Object24: Object25: 
Object26: Object27: Object28: Object29: Object30: Object31: Object32: Object33: 
Object34: Object35: Object36: Object37: Object38: Object39: Object40: Object41: 
Object42: Object43: Object44: Object45: Object46: Object47: Object48: Object49: 
Object50: Object51: Object52: Object53: Object54: Object55: Object56: Object57: 
Object58: Object59: Objectlength: 60__proto__: Array[0]
    ctrl.js:37 [Object, Object, Object, Object, Object, Object, Object, Object,
 Object, Object, Object, Object, Object, Object, Object, Object, Object, Object,
 Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object, Object, Object, Object, Object, Object, Object, Object, Object,
 Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object…][0 … 99][100 … 199][200 … 299][300 … 399][400 … 499][500 … 599]
[600 … 642]length: 643__proto__: Array[0]
    ctrl.js:37 [Object, Object, Object, Object, Object, Object, Object, Object,
 Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object…][0 … 99][100 … 199][200 … 299][300 … 399][400 … 499][500 … 599]
[600 … 680]length: 681__proto__: Array[0]

Mouad Debbar · Accepted Answer · 2016-09-25 03:20:00Z

First of all, according to the Angular http docs, you need to get the result from response.data not response.

Second, http requests are asynchronous. So you need to return a promise from your getPages method. In this case, you could create a promise that waits on all the promises of the http requests:

app.service("dataGrab", function($http) {
  this.fetchImgur = function(url) {
    return $http({
      url: url,
      method: 'GET',
      headers: {'Authorization': 'Client-ID 55f28598b46e0fa'}
    }).then(function successCallback(response) {
      return response.data;
    }, function errorCallback(response) {
      console.log("Request failed for URL:", url);
    });
  };

  this.getPages = function(count) {
    var requests = new Array(count);
    for (var i = 0; i < count; i++) {
      requests[i] = this.fetchImgur("https://api.imgur.com/3/gallery/hot/viral/" + i + ".json");
    }
    // This creates a promise that resolves once all requests are resolved.
    return Promise.all(requests).then(function(pages) {
      // Some JS magic to concatenate all pages into a single array.
      return Array.prototype.concat.apply([], pages);
    });
  }
});

app.controller("imgurCtrl", function($scope, dataGrab) {
  $scope.test = "This is a test";
  dataGrab.getPages(3).then(function(imgurData) {
    $scope.imgurData = imgurData;
    console.log(imgurData);
  });
});

Hope that helps!

Collectives™ on Stack Overflow

How to create an array of Json objects from multiple Get Requests in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related