angularJS閉合使得$ HTTP.get不回我的JSON對象的數組

Question

我在module.factory的DataService下列3種方法我現在用角1.5

• getCannedJSON。此功能按預期工作，我希望其他人以相同的方式行事。我複製並粘貼了從郵遞員的webAPI中獲得的JSON，並將其添加到函數中。它返回一個像我想要的對象數組。
• getDataFromAPI。出於某種原因，我無法得到這個函數來返回響應。 console.log（response）具有與getCannedJSON相同的數據。相反，它返回一個d {$$ State：object}任何想法如何我可以改變這段代碼來改變它的返回格式與getCannedJson方法相同嗎？
  • getDataFromApiWithDynamicUrl這與上面的方法沒有什麼不同，但是它會爲web api提供一個dyanmic url。它很好地減去它不返回一個json對象的數組列表，而是返回相同的$$ State對象。

我想getDataFromAPI返回的JSON請求中的所有對象的同一陣列狀getCannedJson一樣。任何想法，我搞砸了。以下是他們通過console.log返回的兩種不同類型的對象的屏幕截圖。我希望​​底部的數據看起來像頂部的數據。

爲DataService的模塊工廠的代碼是以下的

(function (module) { 
'use strict'; 

DataService.$inject = ['$http', '$q']; 

function DataService($http, $q) { 
    var getDataFromAPI = function() { 
     var returnthis; 
     return $http({ //this top level returns instead 
      url: "http://localhost:34183/api/quality/month", 
      dataType: 'json', 
      method: 'GET', 
     }).success(function (response) { 
      console.log("This Response shown below is pefect! but it wont return...."); 
      console.log(response); 
      return (response);//This never returns 
     }).error(function(error){ 
      console.log(error); 
     }); 
     return returnthis; 
    }; 
    var getDataFromApiWithDynamicUrl = function (pathurl) { // this is version 2 of the method i want to work where i can dynamically change the url to the path 
     return $http.get(pathurl); 
    }; 
    var getCannedJSON = function ($http) { 
     return [{ 
        "hockeyTeam": "Sharks", 
        "PlayoffRecord": { 
         "wins": "0" 
        }, 
       }, 
       { 
        "hockeyTeam": "Pengiuns", 
        "PlayoffRecord": { 
         "wins": "1" 
        }, 
       } 
     ]; 
    }; 
    return { 
     getDataFromAPI: getDataFromAPI, 
     getDataFromApiWithDynamicUrl: getDataFromApiWithDynamicUrl, 
     getCannedJSON: getCannedJSON 
    }; 
} 
module.factory('DataService', DataService); 
})(angular.module('MyCoolModule')); 

是其中i調用這些方法消耗在我的控制器JSON數據的代碼。

(function (module) { 
'use strict'; 

hockeyViewController.$inject = ['DataService']; 
function hockeyViewController(DataService) { 
    var vm = this; 

    vm.headers = [ 
     { name: 'Hockey Team', key: 'hockeyTeam' }, 
     { name: 'Record', key: 'PlayoffRecord'} 
    ]; 

    vm.cannedData = angular.copy(DataService.getCannedJSON()); 
    vm.getDataFromAPI = DataService.getDataFromAPI(); 
    vm.getDataFromAPIwithCustomURL = []; 
    DataService.getDataFromApiWithDynamicUrl("http://localhost:34183/api/quality/month").then(function(response){ 
     console.log("this response should work - and it does it in the right format"); 
     console.log(response.data);// this looks perfect 
     vm.getDataFromAPIwithCustomURL = response.data; 
     return response.data; 
    }, function (error) { 
     console.log(error); 
    }); 
    vm.testMonthResults2 = angular.copy(DataService.getDataFromApiWithDynamicUrl("http://localhost:34183/api/quality/month")); 

    console.log("canned json Data- works great"); 
    console.log(vm.cannedData);// this works perfectly 
    console.log("this is the data results with dynamic url - returns wrong object the $$state "); 
    console.log(vm.getDataFromAPI);// returns $$state not array of objects 
    console.log(vm.getDataFromAPIwithCustomURL); // this returns [] which is wrong 
    console.log(DataService.getDataFromApiWithDynamicUrl("http://localhost:34183/api/quality/month")); 
    // this doesnt work either 
} 
function reportTabularViewDirective() { 
    return { 
     restrict: "E", 
     controller: hockeyViewController, 
     controllerAs: 'vm', 
     bindToController: true, 
     scope: { 
     }, 
     templateUrl: "app/widgets/hockey-view.html" 
    }; 
} 

module.directive('hockeyView', hockeyViewDirective); 

}）（angular.module（'MyCoolModule'））;

Answer 1

可以試試這個

var getDataFromAPI = function() { 
     return $http({ 
      url: "/api/quality/month", // try using relative path 
      dataType: 'json', 
      method: 'GET', 
      }).then(function(response) { 
       console.log(response); 
       return respose.data; 
      }, function(error) { 
       console.log(error); 
       return []; 
      }); 
}; 

但最好使用這樣的：服務回報只有promise和控制器使用then功能處理回覆

在服務：

var getDataFromAPI = function() { 
    return $http.get('/api/quality/month'); 
}; 

在控制器：

DataService.getDataFromAPI().then(function(response) { 
    console.log(response.data); 
}, function(error) { 
    console.log(error); 
}); 

Answer 2

您通過調用DataService.getDataFromAPI()獲得$ promise對象。您需要處理$ promise對象以獲取響應。

DataService.getDataFromAPI().then(function(response) { 
    // console.log(response); 
}) 

這同樣適用於當你getDataFromApiWithDynamicUrl()功能。

欲瞭解更多信息，請參閱文檔：

$http
$q