Question

具有这样的对象数组：

[{"event_id":1,"person":"John"},
 {"event_id":2,"person":"John"},
 {"event_id":3,"person":"Mike"},
 {"event_id":1,"person":"Mike"},
 {"event_id":1,"person":"Anna"},
 {"event_id":3,"person":"Anna"}]

所需结果应基于event_id进行组合，并以如下表结构显示它们：

1 John, Mike, Ana
2 John
3 Mike, Anna

每行代表一个事件，各行包含参加该事件的人员。我不知道如何在JavaScript中执行此操作。有什么建议吗？

Answer 1

您可以使用reduce：

const data = [
    { event_id: 1, person: 'John' },
    { event_id: 2, person: 'John' },
    { event_id: 3, person: 'Mike' },
    { event_id: 1, person: 'Mike' },
    { event_id: 1, person: 'Anna' },
    { event_id: 3, person: 'Anna' },
];

const result = data.reduce(
    (acc, val) => ({
        ...acc,
        [val.event_id]: acc[val.event_id] ? [...acc[val.event_id], val.person] : [val.person],
    }),
    {},
);

console.log(result);

Answer 2

您可以将Map和.reduce()一起使用来对对象进行分组，其中event_id是映射中的键，值是累积的{{1}相同的person值的}值。然后，您可以使用event_id将每个Array.from()条目映射到表行和数据的HTML字符串。然后，您可以像下面这样将字符串添加到HTML中：

[key, value]

Answer 3

我建议您使用Map数据类型。

地图是键数据项的集合，就像对象一样。但是主要区别在于Map允许使用任何类型的键。首先，我们迭代对象数组，然后检查Map中是否有任何event_id，然后将Object.person推送到event_id条目的值：

const listOfObjects = [
    { "event_id": 1, "person": "John" },
    { "event_id": 2, "person": "John" },
    { "event_id": 3, "person": "Mike" },
    { "event_id": 1, "person": "Mike" },
    { "event_id": 1, "person": "Anna" },
    { "event_id": 3, "person": "Anna" }];
let eventIdCollection = new Map();
listOfObjects.forEach(obj => {
    if (eventIdCollection.has(obj.event_id)) {
        let persons = eventIdCollection.get(obj.event_id);
        persons.push(obj.person);
        eventIdCollection.set(obj.event_id, persons);
    }
    else {
        eventIdCollection.set(obj.event_id, [obj.person]);
    }
});

结果是event_id与人数组的映射。

根据其中一个对象合并来自一组对象的数据

3 个答案: