Question

我正在为学校做一个项目，我们必须连接到API并获取一些数据。我的同学和我正在尝试使用他们的API连接到Imgur，并在前100页回读有关图像的信息，基本上是趋势分析。据我所知，Imgur的API只允许您一次访问一个页面的信息，因此我将http get放入一个将遍历前100页的for循环中。为了分析这些数据，我们需要将它放入一个我们可以从中拉出的数组中。到目前为止，我们有这样的事情：

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




});

我理想的是，每个JSON对象都要返回到数组中，但我们得到的却是我不完全理解的：

    [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]

Answer 1

首先，根据Angular http docs，您需要从response.data而不是response获得结果。

其次，http请求是异步的。因此，您需要从getPages方法返回承诺。在这种情况下，您可以创建一个等待http请求的所有承诺的承诺：

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

希望有所帮助！

如何从Angular中的多个Get请求创建一个Json对象数组

1 个答案: