I have an array of object and each object has mutiple options, how to covert the it to multiple objects based on the options count?
Input:
var arr = [{name: "audio", options:[{name:'true', value: 'T'},{name:'false', value: 'F'},{name:'yes', value: 'Y'}]},
{name: "video", options:[{name:'true', value: 'T'},{name:'false', value: 'F'},{name:'yes', value: 'Y'}]},
{name: "call", options:[{name:'true', value: 'T'},{name:'false', value: 'F'},{name:'yes', value: 'Y'}]}]
const res = Object.values(arr.reduce((acc,{name, options})=>{
acc[name] = acc[name] || {name, options: []};
acc[name].options.push(options);
return acc;
}, {}));
console.log(res).as-console-wrapper { max-height: 100% !important; }Expected Output:
[{name: "audio", options:{name:'true', value: 'T'}},
{name: "audio", options:{name:'false', value: 'F'}},
{name: "audio", options:{name:'yes', value: 'Y'}},
{name: "video", options:{name:'true', value: 'T'}},
{name: "video", options:{name:'yes', value: 'Y'}},
{name: "video", options:{name:'false', value: 'F'}},
{name: "call", options:{name:'true', value: 'T'}},
{name: "call", options:{name:'No', value: 'N'}},
{name: "call", options:{name:'false', value: 'F'}}]
You can do this with a flat map
const arr = [{"name":"audio","options":[{"name":"true","value":"T"},{"name":"false","value":"F"},{"name":"yes","value":"Y"}]},{"name":"video","options":[{"name":"true","value":"T"},{"name":"false","value":"F"},{"name":"yes","value":"Y"}]},{"name":"call","options":[{"name":"true","value":"T"},{"name":"false","value":"F"},{"name":"yes","value":"Y"}]}]
const res = arr.flatMap(({ options, ...props }) =>
options.map(options => ({ ...props, options })))
console.log(res).as-console-wrapper { max-height: 100% !important; }This creates an array of arrays for each options in the collection and then flattens it to produce a one-dimensional array.
The spread syntax lets you merge any top-level properties (like name) into each option result
You need a nested loop over the options array to split them into separate array elements.
var arr = [{name: "audio", options:[{name:'true', value: 'T'},{name:'false', value: 'F'},{name:'yes', value: 'Y'}]},
{name: "video", options:[{name:'true', value: 'T'},{name:'false', value: 'F'},{name:'yes', value: 'Y'}]},
{name: "call", options:[{name:'true', value: 'T'},{name:'false', value: 'F'},{name:'yes', value: 'Y'}]}]
const res = [];
arr.forEach(({
name,
options
}) => options.forEach(option => res.push({
name,
options: option
})));
console.log(res)Use Array.map to create the converted elements, then use Array.flat to flatten the 2D array.
var arr = [{name: "audio", options:[{name:'true', value: 'T'},{name:'false', value: 'F'},{name:'yes', value: 'Y'}]},
{name: "video", options:[{name:'true', value: 'T'},{name:'false', value: 'F'},{name:'yes', value: 'Y'}]},
{name: "call", options:[{name:'true', value: 'T'},{name:'false', value: 'F'},{name:'yes', value: 'Y'}]}]
let output = arr.map(it => {
return it.options.map(option => {
return {name:it.name,options:option}
})
}).flat()
console.log(output);Edit:
As @mplungjan mentioned this is identical to using Array.flatMap.
var arr = [{name: "audio", options:[{name:'true', value: 'T'},{name:'false', value: 'F'},{name:'yes', value: 'Y'}]},
{name: "video", options:[{name:'true', value: 'T'},{name:'false', value: 'F'},{name:'yes', value: 'Y'}]},
{name: "call", options:[{name:'true', value: 'T'},{name:'false', value: 'F'},{name:'yes', value: 'Y'}]}]
let output = arr.flatMap(it => {
return it.options.map(option => {
return {name:it.name,options:option}
})
});
console.log(output);