在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服務中，然後注入其他服務。