javascript - Sum similar keys in an array of objects In javascript
问题描述
I have an array of objects something like the following: -
0: {Id: 0, count1: 5, count2: 10, yearMonth: "201803"}
1: {Id: 0, count1: 10, count2: 0, yearMonth: "201804"}
2: {Id: 1, count1: 900, count2: 200, yearMonth: "201805"}
3: {Id: 0, count1: 10, count2: 0, yearMonth: "201806"}
4: {Id: 1, count1: 100, count2: 100, yearMonth: "201807"}
5: {Id: 1, count1: 100, count2: 2, yearMonth: "201808"}
I want to sum similar keys to get Expected output:
1: {Id: 0, count1: 25, count2: 10}
2: {Id: 1, count1: 1100, count2: 402}
Is it possible to achieve it using any mathematical operation or reduce or any other javascript method?
Thanks
解决方案
通过淘汰赛,您可以使用一系列计算属性来获得所需的(UI?)格式!
免责声明:我假设此列表不会包含数千个项目
1.分组
第一步是从ko.observableArray([])
项目列表 ( ) 到按 id 分组的计算对象:
// Search for "group by javascript" to have this function explained
const groupBy = (prop, xs) => xs.reduce(
(acc, x) => Object.assign(acc, { [x[prop]]: (acc[x[prop]] || []).concat(x) }), {}
);
const items = ko.observableArray([]);
const itemsById = ko.pureComputed(() =>
groupBy("Id", items())
);
itemsById.subscribe(console.log);
items([{Id: 0, count1: 5, count2: 10, yearMonth: "201803"},{Id: 0, count1: 10, count2: 0, yearMonth: "201804"},{Id: 1, count1: 900, count2: 200, yearMonth: "201805"},{Id: 0, count1: 10, count2: 0, yearMonth: "201806"},{Id: 1, count1: 100, count2: 100, yearMonth: "201807"},{Id: 1, count1: 100, count2: 2, yearMonth: "201808"}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
2.合并
现在我们已经对需要汇总的项目列表进行了分组,我们可以开始应用我们的合并逻辑:
const itemsWithSameId = [{Id:0,count1:5,count2:10,yearMonth:"201803"},{Id:0,count1:10,count2:0,yearMonth:"201804"},{Id:0,count1:10,count2:0,yearMonth:"201806"}];
const merge = (itemA, itemB) => ({
Id: itemB.Id,
count1: itemA.count1 + itemB.count1,
count2: itemA.count2 + itemB.count2
});
// Look up "merging objects using reduce in javascript" to find out more
console.log(
itemsWithSameId.reduce(merge, { count1: 0, count2: 0 })
)
3. 从索引对象返回到数组
现在我们知道如何合并我们的组,我们可以回到我们在 UI 中需要的数组:
// Utilities:
const groupBy = (prop, xs) => xs.reduce(
(acc, x) => Object.assign(acc, {
[x[prop]]: (acc[x[prop]] || []).concat(x)
}), {}
);
// Data Logic:
const merge = (itemA, itemB) => ({
Id: itemB.Id,
count1: itemA.count1 + itemB.count1,
count2: itemA.count2 + itemB.count2
});
// App
const items = ko.observableArray([]);
const itemsById = ko.pureComputed(() =>
groupBy("Id", items())
);
// Look up "mapping over the values of a javascript object" for more info
const summedItems = ko.pureComputed(() =>
Object
.values(itemsById())
.map(items => items.reduce(merge, { count1: 0, count2: 0 }))
);
// Apply bindings with viewmodel exposing summedItems
ko.applyBindings({ summedItems });
// Inject data (probably in success callback of ajax call)
items([{Id: 0, count1: 5, count2: 10, yearMonth: "201803"},{Id: 0, count1: 10, count2: 0, yearMonth: "201804"},{Id: 1, count1: 900, count2: 200, yearMonth: "201805"},{Id: 0, count1: 10, count2: 0, yearMonth: "201806"},{Id: 1, count1: 100, count2: 100, yearMonth: "201807"},{Id: 1, count1: 100, count2: 2, yearMonth: "201808"}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
<thead>
<tr>
<th>Id</th>
<th>Count 1</th>
<th>Count 2</th>
</tr>
</thead>
<tbody data-bind="foreach: summedItems">
<td data-bind="text: Id"></td>
<td data-bind="text: count1"></td>
<td data-bind="text: count2"></td>
</tbody>
</table>
推荐阅读
- css - 如何在 prestashop 中添加自定义字体?
- javascript - 为什么滚动条有时会出现,有时却不在 chrome 扩展中
- python - 使用熊猫在多张工作簿中删除特定列
- android - 您的 Android App Bundle 使用错误的密钥进行签名。确保您的 app bundle 使用正确的签名密钥进行签名,然后重试
- ruby - 查看在 COSMOS 中发送的原始字节
- actions-on-google - 如何在 Beta 测试中使用 Google Home 设备进行调试?
- bash - 如何更改各个文件夹中特定文件的名称
- r - R - 将具有重复日期的名称组合成单行
- spring-boot - RestController 在 SpringBoot 中工作正常,但在 Tomcat 上抛出 404
- mysql - 如何将 MySQL JSON 数组中的字符串值转换为大写?