在数组Javascript AngularJS中访问对象的属性

Question

我有一系列产品，每个产品都有价格。我想创建一个过滤器来计算所有产品的总价格。问题是我不能使用 forEach() 因为我在一个回调函数中。我的问题是，是否有类似 myArray.(intheobject).price 的函数，或者管理回调并获得正确结果的方法？

this.productList = [
    {
      type: 'chocolate',
      pack: '3',
      price: 5,
      checkState: false
    },
    {
      type: 'chocolate',
      pack: '5',
      price: 7,
      checkState: false
    },
    {
      type: 'chocolate',
      pack: '10',
      price: 10,
      checkState: false
    },
    {
      type: 'honey',
      pack: '3',
      price: 5,
      checkState: false
    },
    {
      type: 'honey',
      pack: '5',
      price: 7,
      checkState: false
    },
    {
      type: 'honey',
      pack: '10',
      price: 10,
      checkState: false
    },
    {
      type: 'candy',
      pack: '3',
      price: 5,
      checkState: false
    },
    {
      type: 'candy',
      pack: '5',
      price: 7,
      checkState: false
    },
    {
      type: 'candy',
      pack: '10',
      price: 10,
      checkState: false
    }
  ]


.filter('calculateTotal', function(){
  var totalCost = 0;
  return function(input){
    return totalCost + ???
  }    
})

PierreDuc 的回答后，我的过滤器是这样的：

.filter('calculateTotal', function(){
  return function(input){
    return input.reduce((total, item) => item.price + total, 0);
  }    
})

Answer 1

您可以为此使用reduce 方法：

const totalPrice = [{
    type: 'chocolate',
    pack: '3',
    price: 5,
    checkState: false
  },
  {
    type: 'chocolate',
    pack: '5',
    price: 7,
    checkState: false
}].reduce((total, item) => item.price + total, 0);

Filter 顾名思义，用于根据提供的方法的返回值过滤当前数组。

使用reduce，您可以根据输入转换您的数组，在这种情况下为0。这被分配给传递方法的total 参数，其中item 是数组中的每个项目。您从该方法返回的值将是 total 参数的新值。

Answer 2

filter 回调可以访问每个元素。因此，您需要在回调函数之外创建一个全局变量，并将回调函数中每个元素的值添加到该全局变量中。见filter documentation。

this.totalCost = 0;

this.productList = [
    {
      type: 'chocolate',
      pack: '3',
      price: 5,
      checkState: false
    },
    {
      type: 'chocolate',
      pack: '5',
      price: 7,
      checkState: false
    },
    {
      type: 'chocolate',
      pack: '10',
      price: 10,
      checkState: false
    },
    {
      type: 'honey',
      pack: '3',
      price: 5,
      checkState: false
    },
    {
      type: 'honey',
      pack: '5',
      price: 7,
      checkState: false
    },
    {
      type: 'honey',
      pack: '10',
      price: 10,
      checkState: false
    },
    {
      type: 'candy',
      pack: '3',
      price: 5,
      checkState: false
    },
    {
      type: 'candy',
      pack: '5',
      price: 7,
      checkState: false
    },
    {
      type: 'candy',
      pack: '10',
      price: 10,
      checkState: false
    }
  ]
var self = this;
angular.module('myReverseFilterApp', [])
.filter('calculateTotal', function(){
      return function(input) {
           self.totalCost += input.price;
      }
})

然后您可以在您的 html 中访问 totalCost 变量。从过滤器函数返回totalCost 是不可能的，因为该函数被应用于数组的每个元素。语法可能不正确，但我想你明白了。

Answer 3

const productList = [
    {
      type: 'chocolate',
      pack: '3',
      price: 5,
      checkState: false
    },
    {
      type: 'chocolate',
      pack: '5',
      price: 7,
      checkState: false
    },
    {
      type: 'chocolate',
      pack: '10',
      price: 10,
      checkState: false
    },
    {
      type: 'honey',
      pack: '3',
      price: 5,
      checkState: false
    },
    {
      type: 'honey',
      pack: '5',
      price: 7,
      checkState: false
    },
    {
      type: 'honey',
      pack: '10',
      price: 10,
      checkState: false
    },
    {
      type: 'candy',
      pack: '3',
      price: 5,
      checkState: false
    },
    {
      type: 'candy',
      pack: '5',
      price: 7,
      checkState: false
    },
    {
      type: 'candy',
      pack: '10',
      price: 10,
      checkState: false
    }
  ]
let totalPrice = productList.reduce(function(sum, currentValue, currentIndex, array) {
  return sum+currentValue['price']
},0);
console.log(totalPrice)

Answer 4

您可以这样做，首先获取所有价格的列表并将其存储在一个数组中，然后使用reduce函数对价格执行操作 另请阅读reduce函数的文档：

reduce documentation

let pricesList = [];
productList.forEach(product => {

    pricesList.push(product['price']);

})

let sumPrice = pricesList.reduce((priceA, priceB) => priceA + priceB, 0);