convert array to multiple object based on options array?

user_12523260 0
Viewed 90

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'}}]
javascript
5 Answers

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

user_2833660

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)

user_14918950

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

user_103176840 
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 newArr = arr.reduce((acc, cur) => {
    acc = [...acc, ...cur.options.map(option => {
        return {
            ...cur,
            options: option,
        }
    })];
    return acc;
}, []);
user_98173730

You can use map function to resolve your query.

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 result = [];
arr.map(a => {
  a.options.map(o => {
    result.push({ name: a.name, options: { ...o }
    });
  });
});
console.log(result)

user_40004500
Related