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
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)
return [...prev, {}] may be overly fancy here. It constructs a brand new list, while it would be perfectly valid to modify the accumulator - push into the existing list in this case.
push here, I just prefer not to modify the accumulator and rather return a new value.
return [...prev, {}]. But purely performance issue if list is large.
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; }
(r.label && ' ') mean?
r.label is an empty string ans falsy. this is taken and label is added, no space. if r.label is not an empty string, it takes the space and adds the label. basically it is a very short form of CertainPerfomance' (a.label ? ' ' : '') part.
r.label ? ' ' : ''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.
