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

因为您想要异步地使用项目填充商店，所以您需要重新考虑商店控制器以使用promises：

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;
  }
});

避免将store等构造函数放在全局范围内。除了混乱的全局范围之外，他们还无法利用$http等AngularJS服务。而是将这些函数封装在AngularJS服务中，然后可以注入其他服务。

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

2 个答案: