问题描述
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没有定义
1楼
TKoL
2
已采纳
2019-02-25 10:19:26
首先对数据排序：
data.sort((a,b) => Number(a.category.id) - Number(b.category.id));
然后进行操作以记录它们全部或其他
2楼
Nenad Vracar
1
2019-02-25 10:24:28
您可以使用reduce方法在一个对象中进行分组，然后可以使用Object.values()创建带有map和join字符串。
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)
3楼
Yosvel Quintero
1
2019-02-25 10:27:38
你可以使用和获得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);
4楼
Nina Scholz
1
2019-02-25 10:32:23
您可以使用分组函数进行回调，使用嵌套属性的函数进行组合，并将结果放入平面数组中。 然后将您的样式添加到数组以进行输出。
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; }