Google Pagespeed Insightの結果は、角度を使用してURLの配列から表示できますか？

Question

Googleページスピードの画像最適化結果を配列の各URLに一覧表示する方法としてAngularを使用しようとしていましたが、コントローラが以前の結果を上書きするように設定されていると思われます。以前のURLの結果に加えて、結果がリストに表示されません。以前の結果を上書きせずに、Angularがリクエストして各URLの結果をレンダリングするにはどうすればよいですか？以下のコードを参照してください：

<section class="container" ng-app="myApp"> 
<article ng-controller="myCtrl"> 
<div my-gpsi></div> 
</div> 
</article> 
</section> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
<script> 
var test=document.getElementById('testaway'); 
var urlList = ["https://www.mywebsite.com/array1.html","https://www.mywebsite.com/array2.html", "https://www.mywebsite.com/array3.html"]; 
var urlNew = []; 
angular.module('myApp', []) 
.factory('gpsiUrl', function gpsiUrl() { 
angular.forEach(urlList,function(url){ 
    this.push("https://www.googleapis.com/pagespeedonline/v2/runPagespeed?url=" + url + "&key=googlekey") 
},urlNew); 
return urlNew; 
}) 
.controller('myCtrl',['$scope','gpsiUrl', '$http','$sce','$compile', function($scope,gpsiUrl,$http,$sce,$compile){ 
     $scope.urllist=gpsiUrl; 
     angular.forEach($scope.urllist,function(url){ 
      $http({ 
       method: 'GET', 
       url: $sce.trustAsResourceUrl(url), 
       dataType: 'json', 
       headers: { 
        "Content-Type": "application/json" 
       } 
      }).then(function successCallback(response) { 
      $scope.pageName = response.data; 
      $scope.urlBlocks = response.data.formattedResults.ruleResults.OptimizeImages.urlBlocks; 
     }, function errorCallback(response) { 
      console.log("fail"); 
     }); 
    }); 
}]) 
.directive('myGpsi', function() { 
return { 
template: '<div><h1 class="jumbotron">{{ pageName.id }}</h1><div ng-repeat="x in urlBlocks"><div ng-repeat="obj in x.urls"><div ng-repeat="n in obj.result"><div style="word-wrap:break-word;"><table><tr><th ng-repeat="j in n track by $index" style="padding:0 1em;">{{ j.key }}</th></tr><tbody><tr><td ng-repeat="j in n track by $index" style="padding:0 1em;">{{ j.value }}</td></tr></tbody></table></div></div><hr style="width: 100%;height: 1px;background-color: #d3d3d3;display: block;margin: 25px 0;"></div></div></div>' 
}; 
}) 
</script> 

Answer 1

アプローチを考え直した後に動作します。私はAngular foreachメソッド、工場、サービスを削除しました。代わりに、ng-repeatは、プレーンJS forループによって変更されたURLの配列によって通知されます。以前のhttp要求のデータを置き換える代わりに、結果が追加されます。

var siteUrls['https://www.mywebsite.com/array1.html','https://www.mywebsite.com/array2.html','https://www.mywebsite.com/array3.html','https://www.mywebsite.com/array4.html'] 
var myapp = angular.module('myApp', []); 
myapp.controller('myCtrlr', ['$scope','$http',function($scope, $http) { 
for(i=0;i<siteUrls.length;i++){ 
$scope.mySiteUrls=[]; 
    var newURl="https://www.googleapis.com/pagespeedonline/v2/runPagespeed?url=" + siteUrls[i] + "&rule=googlekey"; 
    $http.get(newURl).then(function(response) { 
    $scope.mySitePageRaw = response.data; 
    $scope.mySitePageImageData = response.data.formattedResults.ruleResults.OptimizeImages.urlBlocks; 
    $scope.mySiteUrls.push($scope.mySitePageRaw,$scope.mySitePageImageData); 
}); 
} 
}]);