首页 > 解决方案 > 在 vue.js 中连接数组

问题描述

我有以下数组,每个用户显示记录

let data = [
  { userid: 1, placename: abc,  price: 10 },
  { userid: 1, placename: pqr,  price: 20 },  
  { userid: 1, placename: xyz , price: 30},
  { userid: 2, placename: abc , price: 40},
  { userid: 2, placename: lmn , price: 50}

所以,我想通过用户ID、地名和价格总和的连接来转置这个数据组。它应该如下所示

UseId   PlaceName   Price
1       abc,xyz,pqr 60
2       abc,lmn     90

我正在将这些数据绑定到引导 vue b-table 组件到目前为止,我已经这样做了

 groupby: function(array, key) {
            const result = {};
            array.forEach(item => {
                if (!result[item[key]]) {
                    result[item[key]] = [];
                }
                result[item[key]].push(item);
            });
           
            return result;
        },

并在视图初始化时调用它,

groupby(this.list,'userid');

尽管我按用户逐行获取所有记录,但我无法连接这些值并进行总计。

绑定到表时出现错误“预期的 Arrat,得到对象”

这里有什么遗漏吗!

对此的任何帮助表示赞赏!

标签: javascripttypescriptvue.js

解决方案


尝试过滤具有相同用户 ID 的项目,然后加入地名并求和它们的价格:

 array.forEach(item => {
                if (!result[item[key]]) {
                    result[item[key]] = [];
                }
        let matched=array.filter(el=>el.UseId===item.UseId);
         result[item[key]].push(
           {
              UseId:item.UseId,
              placeName:matched.map(e=>e.placename).join(),
              Price:matched.reduce((a, b) => a + b.price, 0)

           });//push end

 });

推荐阅读