javascript - 在 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,得到对象”
这里有什么遗漏吗!
对此的任何帮助表示赞赏!
解决方案
尝试过滤具有相同用户 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
});
推荐阅读
- javascript - 加载带有 *ngIf 的微调器在函数执行期间未显示
- c++ - 将字符数组设置为彼此相等的方法不起作用
- arrays - 如何在没有`each``map`或`collect`方法的情况下用while对ruby中的数字数组进行平方?
- unity3d - Unity——粒子系统材质是这样的?
- xml - 是否可以从 XMl 中获取具有最低值的单个元素?
- asp.net - 如何在 Typescript 中引用本机 ASP 控件?
- vuex - 无法读取未定义的 nuxtjs vuex 的属性“$axios”
- c++ - C++:从 .txt 文件中读取复数并存储到复数数组中
- parquet - Amazon Glue - 创建单个 Praquet
- java - @Transactional 的“REQUIRES_NEW”传播属性的真实世界用例是什么