Create new object from array of nested arrays that contains objects

Question

I have the following array with nested arrays:

const options = [
  [
    {
      label: "Blue",
      option_id: "1"
    },
    {

      label: "Small",
      option_id: "2"
    }
  ],
  [
    {
      label: "Red",
      option_id: "1"
    },
    {
      label: "Large",
      option_id: "2"
    }
  ]
];

I want to create an array of objects from each pair, ex:

[
 {
   label: ”Blue Small“,
   option_id: [1,2]
 },
...
]

edit : thanks everyone for the great answers

Answer 1

Use .map over the options array, and reduce each subarray into an object:

 const options = [ [ { label: "Blue", option_id: "1" }, { label: "Small", option_id: "2" } ], [ { label: "Red", option_id: "1" }, { label: "Large", option_id: "2" } ] ]; const result = options.map(arr => arr.reduce( (a, { label, option_id }) => { a.label += (a.label ? ' ' : '') + label; a.option_id.push(option_id); return a; }, { label: '', option_id: [] } ) ); console.log(result); 

Answer 2

reduce is a great way to these array transformations.

const options = [
  [
    {
      label: "Blue",
      option_id: "1"
    },
    {

      label: "Small",
      option_id: "2"
    }
  ],
  [
    {
      label: "Red",
      option_id: "1"
    },
    {
      label: "Large",
      option_id: "2"
    }
  ]
];

const newArray = options.reduce((prev,current)=>{
  const label = current.map(o=>o.label).join(' ')
  const optionid = current.map(o=>o.option_id)
  return [...prev,{option_id:optionid,label}]
},[])

console.log(newArray)

Answer 3

You could map and collect the data.

 const options = [[{ label: "Blue", option_id: "1" }, { label: "Small", option_id: "2" }], [{ label: "Red", option_id: "1" }, { label: "Large", option_id: "2" }]], result = options.map(a => a.reduce((r, { label, option_id }) => { r.label += (r.label && ' ') + label; r.option_id.push(option_id); return r; }, { label: '', option_id: [] })); console.log(result); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 4

Use map & reduce . map will return a new array and inside the callback function of map, use reduce and by default pass an object in the accumulator.

 const options = [ [{ label: "Blue", option_id: "1" }, { label: "Small", option_id: "2" } ], [{ label: "Red", option_id: "1" }, { label: "Large", option_id: "2" } ] ]; let k = options.map(function(item) { return item.reduce(function(acc, curr) { acc.label = `${acc.label} ${curr.label}`.trim(); acc.option_id.push(curr.option_id) return acc; }, { label: '', option_id: [] }) }); console.log(k) 

Answer 5

You can use map() and reduce() :

 const options = [ [ { label: "Blue", option_id: "1" }, { label: "Small", option_id: "2" } ], [ { label: "Red", option_id: "1" }, { label: "Large", option_id: "2" } ] ]; const result = options.map((x) => { let label = x.reduce((acc, val) => { acc.push(val.label); return acc; }, []).join(','); let optArr = x.reduce((acc, val) => { acc.push(val.option_id); return acc; }, []); return { label: label, option_id: optArr } }); console.log(result); 

Answer 6

You can always approach iteratively, first write the thing with numbered for loops:

 const options = [[{label: "Blue",option_id: "1"},{label: "Small",option_id: "2"}], [{label: "Red",option_id: "1"},{label: "Large",option_id: "2"}]]; const result = []; for(var i=0; i<options.length; i++){ var arr = options[i]; var labels = []; var ids = []; for(var j=0; j<arr.length; j++){ var opt = arr[j]; labels.push(opt.label); ids.push(opt.option_id); } result.push({label:labels.join(" "),option_id:ids}); } console.log(result); 

Then throw away the indices, with forEach

 const options = [[{label: "Blue",option_id: "1"},{label: "Small",option_id: "2"}], [{label: "Red",option_id: "1"},{label: "Large",option_id: "2"}]]; const result = []; options.forEach(arr => { var labels = []; var ids = []; arr.forEach(opt => { labels.push(opt.label); ids.push(opt.option_id); }); result.push({label:labels.join(" "),option_id:ids}); }); console.log(result); 

Then the outer loop can be trivially map -ed:

 const options = [[{label: "Blue",option_id: "1"},{label: "Small",option_id: "2"}], [{label: "Red",option_id: "1"},{label: "Large",option_id: "2"}]]; const result = options.map(arr => { var labels = []; var ids = []; arr.forEach(opt => { labels.push(opt.label); ids.push(opt.option_id); }); return {label:labels.join(" "),option_id:ids}; }); console.log(result); 

And try to reduce the inner loop:

 const options = [[{label: "Blue",option_id: "1"},{label: "Small",option_id: "2"}], [{label: "Red",option_id: "1"},{label: "Large",option_id: "2"}]]; const result = options.map(arr => (lists => ({label:lists.labels.join(" "),option_id:lists.ids})) (arr.reduce((lists,opt) => { lists.labels.push(opt.label); lists.ids.push(opt.option_id); return lists; },{labels:[],ids:[]})) ); console.log(result); 

The arr.reduce thing is an argument for the lists => function here (it replaces the simple return line from the previous snippets). I just wanted to keep the join , but it is propably a bit overdone this way. So there would be nothing wrong with keeping an explicit variable instead.