如何在 JavaScript 中对映射对象的数据进行分组？

Question

const data = [
    {
        id: "1",
        name: "monkey",
        category: {
            id: "2",
            color: "blue"
        }
    },
    {
        id: "2",
        name: "cat",
        category: {
            id: "1",
            color: "red"
        }
    },
    {
        id: "3",
        name: "snake",
        category: {
            id: "2"
            color: "blue",
        }
    },
    {
        id: "4",
        name: "elephant",
        category: {
            id: "1"
            color: "green"
        }
    }
];

这是我的代码：

return (data.map(obj => obj.category ? `color: ${obj.category.color} , name:   ${obj.name}` : `${obj.name}`)).join('<br>');

输出结果如下：

color: blue,  name: monkey
color: red,   name: cat
color: blue,  name: snake
color: green, name: elephant

我想做的是按类别分组输出，如下所示：

color: blue,  name: monkey
color: blue,  name: snake
color: green, name: elephant
color: red,   name: cat

这是我的方法：

return (data.map(data.groupBy(obj.category, "category"),obj => obj.category ? `color: ${obj.category.color} , name:   ${obj.name}` : `${obj.name}`)).join('<br>').sort();

但是我遇到了错误

obj未定义

- peace_love

---

你从哪里得到了 groupBy？ - Nina Scholz

@NinaScholz https://www.consolelog.io/group-by-in-javascript/ - peace_love

为什么不先按类别对数组进行排序，然后再将所有内容 console.log 输出呢？ - TKoL

Answer 1

首先对数据进行排序：

data.sort((a,b) => Number(a.category.id) - Number(b.category.id));

然后执行记录所有操作或其他操作

- TKoL

---

我正在尝试理解你的代码。为什么要减去类别ID？这是如何工作的？ - peace_love

在数组上运行Sort函数会对数组内的元素对a和b执行回调--如果回调返回负数，则将a放在b之前，如果返回正数，则反之（除非我搞错了）。因此，通过减去类别，我们只是告诉它使用类别来决定哪个先出现，a还是b。 - TKoL

Answer 2

你可以使用reduce方法将内容分组到一个对象中，然后可以使用map和join从Object.values()创建字符串。

const data = [{"id":"1","name":"monkey","category":{"id":"2","color":"blue"}},{"id":"2","name":"cat","category":{"id":"1","color":"red"}},{"id":"3","name":"snake","category":{"id":"2","color":"blue"}},{"id":"4","name":"elephant","category":{"id":"1","color":"green"}}]

const group = data.reduce((r, {name, category: {color}}) => {
  const str = `color: ${color}, name: ${name}`
  r[color] = (r[color] || []).concat(str)
  return r;
}, {})

const res = Object.values(group)
  .map(e => e.join('\n'))
  .join('\n')

console.log(res)

- Nenad Vracar

Answer 3

你可以使用 Array.prototype.sort() 和 Array.prototype.map() 来获得 result。

同时请注意使用 一元加号（+） 将 id 转换为数字值。

代码：

const data = [{id: "1",name: "monkey",category: {id: "2",color: "blue"}},{id: "2",name: "cat",category: {id: "1",color: "red"}},{id: "3",name: "snake",category: {id: "2",color: "blue",}},{id: "4",name: "elephant",category: {id: "1",color: "green"}}];
const result = data
  .sort((a,b) => +b.category.id - +a.category.id)
  .map(obj => `color: ${obj.category.color}, name: ${obj.name}`);

console.log(result);

- Yosvel Quintero

Answer 4

你可以使用分组功能，其中包括回调函数以用于按嵌套属性进行分组，并以平面数组的形式获取结果。然后将样式添加到数组中以进行输出。

Array.prototype.groupBy = function (prop) {
    return this.reduce(function (groups, item) {
        const val = typeof prop === 'function' ? prop(item) : item[prop];
        groups[val] = groups[val] || [];
        groups[val].push(item);
        return groups;
    }, {})
};

const
    data = [{ id: "1", name: "monkey", category: { id: "2", color: "blue" } }, { id: "2", name: "cat", category: { id: "1", color: "red" } }, { id: "3", name: "snake", category: { id: "2", color: "blue", } }, { id: "4", name: "elephant", category: { id: "1", color: "green" } }],
    grouped = Object
        .values(data.groupBy(o => o.category.id))
        .reduce((a, b) => [...a, ...b]),
    result = Object
        .values(grouped)
        .map(obj => `color: ${obj.category.color} , name:   ${obj.name}`).join('<br>');

console.log(grouped);
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

- Nina Scholz