I have two arrays. One with clothing types and one with colors. They are both always equal in length. And they match in length and position. So the first item shirt, is in red and in orange. Like:
const clothing = ['shirt', 'jacket', 'jeans', 'jeans', 'shirt', 'jeans', 'shirt', 'jacket'];
const colors = ['red, orange', 'blue, red', 'red, orange, blue', 'red, blue', 'orange', 'blue', 'red, blue', 'orange, blue'];
The array length can be different and there can be more clothing types. Colors are always red, orange or blue.
What kind of formula do I need to get the total amount of colors for each clothing type?
Outcome which i would like is
outcome = [{
shirt: [number of shirts in red, number of shirts in orange, number of shirts in blue];
jacket: [number of jackets in red, number of jackets in orange, number of jackets in blue];
jeans: [number of jeans in red, number of jeans in orange, number of jeans in blue];
}]
You can use a nested 'group by' on clothing item and color based on index. Here using nested for...of loops, the outer on the entries() of the clothing array, and the inner on the parsed color string by index in the colors array.
I've left the result as an object, but you can simply map the values of it to form the arrays in your expected output.
const clothing = ['shirt', 'jacket', 'jeans', 'jeans', 'shirt', 'jeans', 'shirt', 'jacket'];
const colors = ['red, orange', 'blue, red', 'red, orange, blue', 'red, blue', 'orange', 'blue', 'red, blue', 'orange, blue'];
const totals = {};
for (const [i, item] of clothing.entries()) {
const itemColors = colors[i].split(',').map(c => c.trim());
totals[item] ??= {};
for (const c of itemColors) {
totals[item][c] = (totals[item][c] ?? 0) + 1;
}
}
console.log('number of shirts in red:', totals.shirt.red);
console.log('Totals:', totals);
// You can simply map the totals object as you see fit, here to your expecte 'outcome'
const outcome = [Object.fromEntries(
Object.entries(totals)
.map(([k, { red = 0, orange = 0, blue = 0 }]) => [k, [red, orange, blue]])
)];
console.log('Outcome:', outcome)Below may be one possible solution to achieve the desired objective.
Code Snippet
const countItems = (ar1, ar2) => (
[
ar1.reduce(
(fin, itm, idx) => ({
...fin,
[itm]: [
(fin[itm]?.[0] || 0) + (ar2[idx].includes('red') ? 1 : 0),
(fin[itm]?.[1] || 0) + (ar2[idx].includes('orange') ? 1 : 0),
(fin[itm]?.[2] || 0) + (ar2[idx].includes('blue') ? 1 : 0)
]
}),
{}
)
]
);
const clothing = ['shirt', 'jacket', 'jeans', 'jeans', 'shirt', 'jeans', 'shirt', 'jacket'];
const colors = ['red, orange', 'blue, red', 'red, orange, blue', 'red, blue', 'orange', 'blue', 'red, blue', 'orange, blue'];
console.log(countItems(clothing, colors));Explanation
.reduce to iterate over the clothing arrayfin is initialized to an empty objectfin then increment the red, orange, blue counters accordinglyfinI'd recommend this solution. Unlike the answer you accepted, this has no hardcoded values, so it will support any number of product names, and any number of colors.
const clothing = ['shirt', 'jacket', 'jeans', 'jeans', 'shirt', 'jeans', 'shirt', 'jacket'];
const colors = ['red, orange', 'blue, red', 'red, orange, blue', 'red, blue', 'orange', 'blue', 'red, blue', 'orange, blue'];
const getOutcome = (clothing, colors) => {
const map = {};
for (const [i, item] of Object.entries(clothing)) {
// Grab our list of colors for this specific clothing item
const colorList = colors[i].split(', ');
// If this clothing item's array doesn't exist in our map, add it
if (!map[item]) map[item] = {};
// Loop through our color list
colorList.forEach((color) => {
// If that color doesn't yet exist for the item, add it
if (!map[item][color]) {
map[item][color] = 1;
return;
}
// If it does exist, add 1 to it
map[item][color] = map[item][color] + 1;
});
}
return map;
};
console.log(getOutcome(clothing, colors));