JSFiddle - React, Tailwind, and code Playground
JavaScript
const input = [
{
"type": "typeA",
"label": "labelA",
"placeholders": ["b", "a", "r"]
},
{
"type": "typeB",
"label": "labelB",
"placeholders": ["x", "y", "z"]
},
{
"type": "typeA",
"label": "labelAAA",
"placeholders": ["a", "b", "c"]
}
];
//You can See example here
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
const output = input.reduce((acc, item) => {
// Find the existing group for the current item's type
const group = acc.find(g => g.type === item.type);
// If the group exists, add the item to it
if (group) {
group.items.push({
label: item.label,
placeholders: item.placeholders
});
} else {
// If the group doesn't exist, create a new one and add it
acc.push({
type: item.type,
items: [
{
label: item.label,
placeholders: item.placeholders
}
]
});
}
return acc;
}, []);
console.log(output);