在angularJs中将ajax响应推送到数组中

Question

我有一个数组对象的函数。

$http({ 
     method: 'GET', 
     url: 'select.php' 
    }).then(function success(response) { 
      alert(response); 
      //$scope.posts=response.data; 
    }, function error(response) { 
      // called asynchronously if an error occurs 
      // or server returns response with an error status. 
    } 
); 
function store() {  
    this.products = [   
     new product("APL", "Apple", "Eat one every…", 12, 90, 0, 2, 0, 1, 2), 
     new product("AVC", "Avocado", "Guacamole…", 16, 90, 0, 1, 1, 1, 2), 
     new product("BAN", "Banana", "These are…", 4, 120, 0, 2, 1, 2, 2)   
    ]; 

} 

在上面的代码中我们传递一些静态数据，而是我试图推它来自另一个文件作为Ajax响应一些动态数据。

所以我怎么能使它动态。我已经试过这样

function store() { 
this.products = [  
    //new product("APL", "Apple", "Eat one every…", 12, 90, 0, 2, 0, 1, 2), 
    //new product("AVC", "Avocado", "Guacamole…", 16, 90, 0, 1, 1, 1, 2), 
    //new product("BAN", "Banana", "These are…", 4, 120, 0, 2, 1, 2, 2) 
    $scope.product.push(response.data); 
]; 
} 

但它不工作。任何想法我怎么能做到这一点？

Answer 1

请参阅下面的代码：因为你要填充的物品商店异步

$scope.products = []; 
    $http({ 
        method: 'GET', 
        url: 'select.php' 
       }).then(function success(response) { 
        $scope.store(response.data); 
        }, function error(response) { 
        // called asynchronously if an error occurs 
        // or server returns response with an error status. 
        }); 

$scope.store = function(data){ 
    $scope.products.push(data); 
} 

Answer 2

，你需要重新因子存储控制器与承诺的工作：

function storeController($scope, $routeParams, DataService) { 

    // get store from service 
    ̶$̶s̶c̶o̶p̶e̶.̶s̶t̶o̶r̶e̶ ̶=̶ ̶D̶a̶t̶a̶S̶e̶r̶v̶i̶c̶e̶.̶s̶t̶o̶r̶e̶;̶ 

    var promise = DataService.getStore(); 

    promise.then(function(store) { 
     $scope.store = store; 
     return store; 
    }).then(function(store) { 
     // use routing to pick the selected product 
     var sku = $routeParams.productSku 
     if (sku != null) { 
     $scope.product = DataService.getProduct(store, sku); 
     }; 
    }); 
} 

然后DataService需要退货承诺：

storeApp.service("DataService", function($http) { 
    ̶v̶a̶r̶ ̶m̶y̶S̶t̶o̶r̶e̶ ̶=̶ ̶n̶e̶w̶ ̶s̶t̶o̶r̶e̶(̶)̶;̶ 

    ̶t̶h̶i̶s̶.̶s̶t̶o̶r̶e̶ ̶=̶ ̶m̶y̶S̶t̶o̶r̶e̶;̶ 
    this.getStore = _getStore; 
    this.getProduct = _getProduct; 

    var dataPromise; 
    function _getStore() { 
    if (! dataPromise) { 
     dataPromise = getData(); 
    }; 
    return dataPromise.then(function(data) { 
     return data.map(item => new product(item)); 
    }); 
    } 

    function getData() { 
    var url = 'select.php'; 
    return $http.get(url) 
     .then(function success(response) { 
     return response.data; 
    }).catch(function error(response) { 
     // called asynchronously if an error occurs 
     console.log("ERROR: ",response.status); 
     throw response; 
    }); 
    } 

    function _getProduct(products, sku) { 
     for (var i = 0; i < products.length; i++) { 
     if (products[i].sku == sku) 
      return products[i]; 
     } 
     return null; 
    } 
}); 

避免把con全局范围内的结构函数，如store。除了混淆全球范围之外，他们无法利用诸如$http之类的AngularJS服务。而是将这些功能封装在AngularJS服务中，然后注入其他服务。