Estoy trabajando en un proyecto ReactJS y en mi estructura de datos, tengo 2 botones: ATM y ESTACIONAMIENTO:
buttons: [ { value: 'ATM', icon: 'atm', floors: [ { value: 'L1', floor: 0, }, { value: 'L2', floor: 0, }, ] }, { value: 'PARKING', icon: 'parking', floors: [ { value: 'L1', floor: 0, }, { value: 'L2', floor: 0, }, ] }, ], Quiero apuntar a los valores de pisos disponibles: 'L1' , 'L2' de ATM y mostrarlos como títulos individuales en HTML.
Mi enfoque es primero aplicar un filtro para cajero automático, luego mapear los pisos de la siguiente manera:
const filteredButton = _.filter(buttons, {value : 'ATM'}); // Filter for ATM const mappedAtm = filteredButton.map((item)=>(item.floors)) // Map for Floors const mappedFloor = mappedAtm.map((floors)=>(floors.value)) // Map for Floors values Sin embargo, cuando console.log(mappedFloor) devuelve indefinido
Mi resultado esperado es: "L1", "L2"
Idealmente, si hago que mapedFloor funcione, lo mostraría en html así (en el navegador debería mostrar 2 etiquetas de intervalo):
<p className="floors"> { mappedFloor.map((items, i) => ( <span key={i}> {items} </span> )) } </p>Cualquier sugerencia y consejo son muy apreciados.
Su filtro devuelve una matriz, el primer mapa lo convierte en una matriz de matriz y el segundo espera que sea una matriz de objetos.
Para arreglar eso, puede usar un Array.prototype.find en lugar del filtro:
buttons.find((e) => e.value === 'ATM').floors.map((e) => e.value)O trate su último mapa como una matriz de una matriz de objetos y no como una matriz de objetos.
También puede hacer eso haciendo una función común que se ejecutará en el evento button onClick que devolverá que lo que quiere es asumir y en la función pasar un argumento de matriz y propiedad que desea filtrar
// function that filter with respect to value property and return floors array, i assume that what you want const filterFloors = (floorsArray,filteredProperty) => { return floorsArray.find((item) => {if (item.value === filteredProperty) return item.floors }).floors } console.log(filterFloors(buttons,'ATM')); console.log(filterFloors(buttons,'PARKING'))