Javascript 来自angular的Restful调用未返回结果_Javascript_Angularjs_Api_Rest

Javascript 来自angular的Restful调用未返回结果

javascript angularjs api rest

Javascript 来自angular的Restful调用未返回结果,javascript,angularjs,api,rest,Javascript,Angularjs,Api,Rest,这里我尝试对外部API进行RESTful调用。我试图在一次通话中实现两件事。我有一个函数，其中有两个嵌套函数。第一个调用搜索API来搜索产品。第二个调用RecommendatedAPI，根据第一个API的结果检索建议我的AngularJS代码如下 var walmartAssn= angular.module('myApp', ['ngResource']); walmartAssn.controller('walmartAssnController', function($sco

这里我尝试对外部API进行RESTful调用。我试图在一次通话中实现两件事。我有一个函数，其中有两个嵌套函数。第一个调用搜索API来搜索产品。第二个调用RecommendatedAPI，根据第一个API的结果检索建议

我的AngularJS代码如下

 var walmartAssn= angular.module('myApp', ['ngResource']);

 walmartAssn.controller('walmartAssnController', function($scope,$resource) {
//define the API urls        
var urlSearchProductApi= 'http://api.walmartlabs.com/v1/search';
var urlRecProductApi='http://api.walmartlabs.com/v1/nbp';
//define API key
var keyApi='exampleKey123';

$scope.searchProductMethod= function(){
    //pass the value from the user input text box
    $scope.searchItem = $scope.item ;
               $scope.productId;
              //get the data from the Walmart product search API
              searchRequest = $resource(urlSearchProductApi, { callback: 
              "JSON_CALLBACK" }, { get: { method: "JSONP" }});

              //pass the input text as a parameter through a GET request
              $scope.searchedProducts = searchRequest.get({ apiKey: keyApi, 
              query: $scope.searchItem });

              console.log($scope.searchedProducts.$promise);
              $scope.searchedProducts.$promise.then(function(eventDetail){

                //fetch the ID of the first item
               $scope.productId = eventDetail.items[0].itemId;
              }); 

              recommendRequest = $resource(urlRecProductApi, { callback:    
              "JSON_CALLBACK" }, { get: { method: "JSONP" , isArray:true}});
              console.log(recommendRequest);

              $scope.recommendedProducts = recommendRequest.get({ apiKey: 
              keyApi, itemId: 42608121 });
              console.log($scope.recommendedProducts)
              $scope.recommendedProducts.$promise.then(function(){

                  $scope.recommendedProductsList = eventDetail;
                  console.log("Print recommended list");
                  console.log(eventDetail);
                  console.log($scope.recommendedProductsList);
                  console.log('End');
             });
  }     });

在上面的应用程序中，第一个函数返回结果，而第二个函数不返回结果

在chrome控制台中，当第二个函数被阻塞时，第一个函数返回一个JSON数组

在chrome控制台的网络选项卡上，我看到呼叫成功，如下所示

此外，我在浏览器中尝试了带有硬编码值的URL，并成功地工作了

感谢您的帮助。

假设第二次调用不依赖于第一次调用，我发现您没有将

eventDetail

定义为第二个方法的参数

因此，不是：

$scope.recommendedProducts.$promise.then(function(){

它将是：

$scope.recommendedProducts.$promise.then(function(eventDetail){

如果您实际上打算使用第一个方法中的

eventDetail

（与

$scope.searchedProducts.$promise一起使用的方法），则需要从第一个然后处理程序调用整个第二个请求代码，传递所需的数据
比如：
var walmartAssn= angular.module('myApp', ['ngResource']);

walmartAssn.controller('walmartAssnController', function($scope,$resource) {
    //define the API urls        
    var urlSearchProductApi= 'http://api.walmartlabs.com/v1/search';
    var urlRecProductApi='http://api.walmartlabs.com/v1/nbp';
    //define API key
    var keyApi='exampleKey123';


    $scope.recommend = function(itemId) {
        var recommendRequest = $resource(urlRecProductApi, { callback:    
        "JSON_CALLBACK" }, { get: { method: "JSONP" , isArray:true}});
        console.log(recommendRequest);

        $scope.recommendedProducts = recommendRequest.get({ apiKey: 
        keyApi, itemId: itemId });
        console.log($scope.recommendedProducts);

        $scope.recommendedProducts.$promise.then(function(eventDetail){
            $scope.recommendedProductsList = eventDetail.items; // or just `eventDetail`?
            console.log("Print recommended list");
            console.log(eventDetail);
            console.log($scope.recommendedProductsList);
            console.log('End');
        });
    };

    $scope.searchProductMethod= function(){
        //pass the value from the user input text box
        $scope.searchItem = $scope.item ;
        $scope.productId;
        //get the data from the Walmart product search API
        var searchRequest = $resource(urlSearchProductApi, { callback: 
        "JSON_CALLBACK" }, { get: { method: "JSONP" }});

        //pass the input text as a parameter through a GET request
        $scope.searchedProducts = searchRequest.get({ apiKey: keyApi, 
        query: $scope.searchItem });

        console.log($scope.searchedProducts.$promise);
        $scope.searchedProducts.$promise.then(function(eventDetail){
            //fetch the ID of the first item
            $scope.productId = eventDetail.items[0].itemId;
            $scope.recommend($scope.productId);
        }); 

    };
});   

还有一件事：
为什么isArray:true
仅用于推荐而不用于搜索
更新
也许值得尝试jQuery JSONP调用，看看它是否有效。可能推荐端点不支持JSONP。AngularJS在本例中返回404，根据
假设第二个调用不依赖于第一个调用，我发现您没有将eventDetail
定义为第二个方法的参数
因此，不是：
$scope.recommendedProducts.$promise.then(function(){

它将是：
$scope.recommendedProducts.$promise.then(function(eventDetail){

如果您实际上打算使用第一个方法中的eventDetail
（与$scope.searchedProducts.$promise一起使用的方法），则需要从第一个然后处理程序调用整个第二个请求代码，传递所需的数据
比如：
var walmartAssn= angular.module('myApp', ['ngResource']);

walmartAssn.controller('walmartAssnController', function($scope,$resource) {
    //define the API urls        
    var urlSearchProductApi= 'http://api.walmartlabs.com/v1/search';
    var urlRecProductApi='http://api.walmartlabs.com/v1/nbp';
    //define API key
    var keyApi='exampleKey123';


    $scope.recommend = function(itemId) {
        var recommendRequest = $resource(urlRecProductApi, { callback:    
        "JSON_CALLBACK" }, { get: { method: "JSONP" , isArray:true}});
        console.log(recommendRequest);

        $scope.recommendedProducts = recommendRequest.get({ apiKey: 
        keyApi, itemId: itemId });
        console.log($scope.recommendedProducts);

        $scope.recommendedProducts.$promise.then(function(eventDetail){
            $scope.recommendedProductsList = eventDetail.items; // or just `eventDetail`?
            console.log("Print recommended list");
            console.log(eventDetail);
            console.log($scope.recommendedProductsList);
            console.log('End');
        });
    };

    $scope.searchProductMethod= function(){
        //pass the value from the user input text box
        $scope.searchItem = $scope.item ;
        $scope.productId;
        //get the data from the Walmart product search API
        var searchRequest = $resource(urlSearchProductApi, { callback: 
        "JSON_CALLBACK" }, { get: { method: "JSONP" }});

        //pass the input text as a parameter through a GET request
        $scope.searchedProducts = searchRequest.get({ apiKey: keyApi, 
        query: $scope.searchItem });

        console.log($scope.searchedProducts.$promise);
        $scope.searchedProducts.$promise.then(function(eventDetail){
            //fetch the ID of the first item
            $scope.productId = eventDetail.items[0].itemId;
            $scope.recommend($scope.productId);
        }); 

    };
});   

还有一件事：
为什么isArray:true
仅用于推荐而不用于搜索
更新
也许值得尝试jQuery JSONP调用，看看它是否有效。可能推荐端点不支持JSONP。AngularJS在本例中返回404，根据
您所有依赖于第一个请求结果的代码都必须输入或从承诺的那部分调用。谢谢Mike，不确定我是否做对了<代码>$scope.searchedProducts.$promise.then（函数（eventDetail）{$scope.productId=eventDetail.items[0].itemId；}.then（函数（）{$scope.recommendedProducts=recommendRequest.get（{apiKey:keyApi，itemId:42608121}）；console.log（$scope.recommendedProducts）；$scope.recommendedProductsList=eventDetail；}）；
所有依赖于第一个请求结果的代码都必须从承诺的then部分输入或调用。谢谢Mike，我不确定我是否做对了；$scope.searchedProducts.$promise.then（函数（eventDetail）{$scope.productId=eventDetail.items[0].itemId；}.then（函数（）{$scope.recommendedProducts=recommendRequest.get（{apiKey:keyApi，itemId:42608121}）；console.log（$scope.recommendedProducts）；$scope.recommendedProductsList=eventDetail；}））
我已经尝试过了，但是通过使用print语句，第二个函数似乎根本没有被命中recommendRequest=$resource（urlRecProductApi，{callback:'JSON_callback}，{get:{method:'JSONP'，isArray:true}）；console.log（recommendRequest）
RecommendeRequest未打印的地方请验证浏览器中确认产品ID的请求是否正确。此外，请确认isArray
部分是否正确。我已尝试从浏览器手动调用URL，找到并返回了预期结果。出于某种原因，在控制台中显示状态404，在网络选项卡中，它显示状态200 OK，可能值得尝试jQuery JSONP调用以查看其是否有效。可能推荐端点不支持JSONP。根据我的尝试，AngularJS在这种情况下返回404，但通过使用print语句，第二个函数似乎根本没有被命中RecommendRequeest=$resource（urlRecProductApi，{callback:“JSON_callback”}，{get:{method:“JSONP”，isArray:true}}）；console.log（recommendRequest）
RecommendeRequest未打印的地方请验证浏览器中确认产品ID的请求是否正确。此外，请确认isArray
部分是否正确。我已尝试从浏览器手动调用URL，找到并返回了预期结果。出于某种原因，在控制台中显示状态404，在“网络”选项卡中，它显示状态200 OK。可能值得尝试jQuery JSONP调用以查看其是否有效。可能推荐端点不支持JSONP。根据