Estoy codificando para hacer una vista web con datos API para que aparezcan en la ventana, pero tengo algunos problemas. ¿Alguien puede ayudarme con este problema?
tal vez no soy bueno hablando ingles para que me entiendas, hice unos dibujos de lo que quiero hacer.
Primero, tengo una matriz como esta
const arr1 = [ {name: 'AAA', no: 23}, {name: 'BBB', no: 42}, {name: 'CCC', no: 33}, {name: 'DDD', no: 90}, {name: 'EEE', no: 101}, {name: 'FFF', no: 10}, ] Mapeé su nombre para el título div h2, y no para la etiqueta p. Aquí están las condiciones actuales.
ingrese la descripción de la imagen aquí
Ahora creo una nueva matriz para agregar más etiquetas p en div, y la matriz tiene una forma como esta.
const arr2 = [ {letter: 'text1', no: 90}, {letter: 'text2', no: 90}, {letter: 'text3', no: 23}, {letter: 'text4', no: 42}, {letter: 'text5', no: 101}, {letter: 'text6', no: 10}, {letter: 'text7', no: 90}, {letter: 'text8', no: 90}, ] lo que quiero hacer exactamente es encontrar los elementos que arr1.no === arr2.no y agregar justo después de la etiqueta p como esta imagen.
ingrese la descripción de la imagen aquí
lo que quiero;
Así que codifiqué así,
arr1.map((c, i) => { arr2.map((v, j) => { if (c.no === v.no) { test.innerText = 'this title has letter: ' + c.no; } }) })Sabía que tenía que hacer 2 mapas para que coincidieran con esas 2 matrices, pero esto no funciona. todo 'este título tiene letra' devuelve el mismo número. ¿Puede alguien por favor decirme lo que me perdí?
Para lograr lo que desea obtener, primero puede mapear a través de la matriz arr1 y mostrar el título y el número, luego use el filtro en la matriz arr2 para obtener las letras que tienen el mismo número y mapear a través del resultado y mostrar las letras. Puede ver el código a continuación para una mejor comprensión. Es bastante fácil.
export default function App() { const arr1 = [ { name: "AAA", no: 23 }, { name: "BBB", no: 42 }, { name: "CCC", no: 33 }, { name: "DDD", no: 90 }, { name: "EEE", no: 101 }, { name: "FFF", no: 10 } ]; const arr2 = [ { letter: "text1", no: 90 }, { letter: "text2", no: 90 }, { letter: "text3", no: 23 }, { letter: "text4", no: 42 }, { letter: "text5", no: 101 }, { letter: "text6", no: 10 }, { letter: "text7", no: 90 }, { letter: "text8", no: 90 } ]; return ( <div> {arr1.map((arr) => ( <div key={arr.name} style={{ border: "1px solid black",padding:"5px 10px", margin:"5px 0" }}> <p>Title : {arr.name}</p> <p>The title has number : {arr.no}</p> {arr2 .filter((ar2) => ar2.no === arr.no) .map((ar2) => ( <p key={ar2.letter}>The title has letter: {ar2.letter}</p> ))} </div> ))} </div> ); }