I have two array, one with n of data and 2nd array with fixed no of data which includes 5-6 color
Example :
Array 1 =>
const category = [
{
name: 'Groceries',
icon: ICONS.GROCERY,
},
{
name: 'Bakery',
icon: ICONS.BAKERY,
},
{
name: 'General Stores',
icon: ICONS.GENERAL_STORE,
},
{
name: 'Cafe & Food',
icon: ICONS.CAFE,
},
{
name: 'Apparels',
icon: ICONS.APPARELS,
},
.
.
.
.
.
.
];
Array 2 =>
const bgColor = ['red', 'pink', 'blue', 'green'];
I want to merge 2 array, means i want to add background color to 1st array (category), when 2nd array elements complete its starts again with index 0
i want array like :
const category = [
{
name: 'Groceries',
icon: ICONS.GROCERY,
color:"red"
},
{
name: 'Bakery',
icon: ICONS.BAKERY,
color:"pink"
},
{
name: 'General Stores',
icon: ICONS.GENERAL_STORE,
color:"blue"
},
{
name: 'Cafe & Food',
icon: ICONS.CAFE,
color:"green"
},
{
name: 'Cafe & Food',
icon: ICONS.CAFE,
color:"red"
},
{
name: 'Apparels',
icon: ICONS.APPARELS,
color:"pink"
},
.
.
.
.
.
.
];
To get circular index you can use remainder operator (%) where max index is the length of colors array:
categories.map((category, index) => {
const circularIndex = index % bgColors.length
return {...category, color: bgColors[circularIndex] }
})