複数のGetリクエストをAngular形式で作成する方法

Question

私はAPIに接続してデータを取得する必要がある学校向けのプロジェクトを行っています。私のクラスメイトと私はImgurにAPIで接続し、最初の100ページの画像に関する情報を取り戻そうとしています。基本的には傾向分析です。 ImgurのAPIには、一度に1ページ分の情報しかアクセスできないので、httpを最初の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); 




}); 

はWhat'd私が理想的のような配列に返される各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である必要があります。

第2に、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); 
    }); 
}); 

希望することができます。