Tengo dos matrices, una con n de datos y la segunda matriz con un número fijo de datos que incluye 5-6 colores
Ejemplo :
Matriz 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, }, . . . . . . ];Matriz 2 =>
const bgColor = ['red', 'pink', 'blue', 'green'];Quiero fusionar 2 matrices, significa que quiero agregar color de fondo a la primera matriz (categoría), cuando los elementos de la segunda matriz completan, comienza nuevamente con el índice 0
quiero una matriz como:
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" }, . . . . . . ];Para obtener un índice circular, puede usar el operador restante (%) donde el índice máximo es la longitud de la matriz de colores:
categories.map((category, index) => { const circularIndex = index % bgColors.length return {...category, color: bgColors[circularIndex] } })