Как я могу сгруппировать данные сопоставленного объекта в 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();

Но я получаю ошибку

объект не определен

Answer 1

Вы можете использовать функцию группировки с обратным вызовом для группировки с функцией для вложенных свойств и получить результат в плоском массиве.Затем добавьте свой стиль в массив для вывода.

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; }

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)

Answer 3

Вы можете получить result, используя Array.prototype.sort () и Array.prototype.map ()

Также обратите внимание на использование одинарный плюс (+) для приведения 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);

Answer 4

Сначала отсортируйте данные:

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

Затем выполните операцию, чтобы зарегистрировать их все или что угодно