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

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

• javascript
• arrays

6 Answers 6

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

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)

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

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

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)

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.