遍历分组集合答案

【问题标题】：Iterate through grouped collection遍历分组集合
【发布时间】：2023-03-06 07:16:01
【问题描述】：

我想遍历集合，但我很难实现这一点，因为我是新手。下面我显示我的数据。

 user: Array [1]
       0. Object
           id:8
           products:Object
              3: Array[2]
                 0: Object
                     value: 25
                     id:4
                1: Object
                     value: 20
                     id:5
               4: Array[3]
                   0: Object
                       value: 14
                       id:6
                   1: Object
                      value: 30
                      id:7
                   1: Object
                      value: 20
                      id:8

所以我想获得价值，以便为每个分组集合对它们求和。集合 3 的总和 =a，集合 4 的总和 =b，等等。

我尝试如下，但我什么也没得到：

data:{
                user:[],
         }
methods:{
                watchedOnly(){
                    var self = this;
                    for(var product in self.user.products ){
                            for (var key in product){
                                if(product.hasOwnProperty('key')){
                                    console.log(product[key]);
                                 }
                            }

                    }
                }, }

谁能帮帮我？

【问题讨论】：

你能说得更具体些吗？我不确定你想总结什么。此外，this.data 是一个数组，而不是一个对象，这意味着 this.user.products 是 undefined。
@str 我想对每个分组数组的值求和。对于 id 为 3 的数组，总和将不同于 4，等等。但我无法在循环中获取值。
提供、复制/粘贴数据真实结构的示例。您手动编写的结构混乱且结构不正确。
@VladislavLadicky 我刚刚编辑过，无法提供所有太多的数据 :)
@jenny 看我的回答并发表评论

标签： javascript vue.js collections

【解决方案1】：

首先，如果您的真实数据具有这样的结构，请发表评论，然后我编辑此答案：

let user = [
  {
    id: 8,
    products: {
      3: [
        {id: 4, value: 25},
        {id: 5, value: 20}
      ],
      4: [
        {id: 6, value: 14},
        {id: 7, value: 30},
        {id: 8, value: 20}
      ]
    }
  }
]

function sum (arr) {
  Object
    .entries(arr[0].products)
    .forEach(pair => {
      let sum = Array
        .from(pair[1].map(o => o.value))
        .reduce((a, b) => a + b)
      console.log(`Sum for product ${pair[0]} is ${sum}`)
    })
}

sum(user)

或者在 Vue 组件中：

export default {
  data () {
    return {
      user: []
    }
  },

  computed: {
    watchedOnly () {
      let result = {}

      Object
        .entries(this.user[0].products)
        .forEach(pair => {
          let sum = Array
            .from(pair[1].map(o => o.value))
            .reduce((a, b) => a + b)
          result[pair[0]] = sum
        })

      return result
    }
  }
}

在模板中使用：

<p v-for="(sum, product) in watchedOnly">
  Sum for product {{ product }} is {{ sum }}
</p>

【讨论】：

非常感谢，我没想到这一切:)