我有一個像這樣的物件陣列：
const data = [
{category: {id: 1, name: 'beverage'}, title: 'Tea'},
{category: {id: 1, name: 'beverage'}, title: 'Coffee'},
{category: {id: 2, name: 'snacks'}, title: 'French fries'},
];
我想要這樣的結果：
const transformed = [
{
category: "beverage",
data: [{title:'coffee'},{title:'tea'}, ...]
},
{
category: "snacks",
data: [{title:'french fries'},...]
},
..
]
我所做的是：
let transformed = data?.map(function (obj) {
var result = {
category: obj.category.title,
data: [],
};
for (var key in obj) {
if (obj.hasOwnProperty(key) && key === 'category') {
result.values.push(obj);
}
}
return result;
});
但是使用這種方法，我會為陣列中的每個物件獲取重復的類別名稱。
uj5u.com熱心網友回復：
與所有分組操作一樣，關鍵是reduce用于構建新物件。
const data = [
{category: {id: 1, name: 'beverage'}, title: 'Tea'},
{category: {id: 1, name: 'beverage'}, title: 'Coffee'},
{category: {id: 2, name: 'snacks'}, title: 'French fries'},
];
const result = Object.values(data.reduce( (a,i) => {
a[i.category.id] = a[i.category.id] || {category:i.category.name, data:[]};
a[i.category.id].data.push({title:i.title});
return a;
},{}));
console.log(result);uj5u.com熱心網友回復：
您可以按nameof分組category并使用物件來獲取分組值。
const
data = [{ category: { id: 1, name: 'beverage' }, title: 'Tea' }, { category: { id: 1, name: 'beverage' }, title: 'Coffee' }, { category: { id: 2, name: 'snacks' }, title: 'French fries' }],
result = Object.values(data.reduce((r, { category: { name: category }, title }) => {
(r[category] ??= { category, data: [] }).data.push({ title });
return r;
}, {}));
console.log(result);.as-console-wrapper { max-height: 100% !important; top: 0; }uj5u.com熱心網友回復：
看一下這個
const data = [
{category: {id: 1, name: 'beverage'}, title: 'Tea'},
{category: {id: 1, name: 'beverage'}, title: 'Coffee'},
{category: {id: 2, name: 'snacks'}, title: 'French fries'},
];
const transform = (data) => {
const grouped = data.reduce((acc, obj) => {
const { category: { id, name }, title } = obj;
acc[id] = (acc[id])
? {
...acc[id],
data: [...acc[id].data, { title }],
}
: { category: name, data: [{ title }] };
return acc;
}, {});
return Object.values(grouped);
};
console.dir(transform(data), {depth: null});
// [
// { category: 'beverage', data: [{ title: 'Tea' }, { title: 'Coffee' }] },
// { category: 'snacks', data: [{ title: 'French fries' }]}
// ]
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/355160.html
標籤：javascript 数组