Después de algunas investigaciones, descubrí que la forma de acceder a este Array a través del mapeo sería algo así como
const locations = [ { country: "United States", city: "Henderson", state: "Kentucky", postalCode: 42420, }, { country: "United States", city: "Henderson", state: "Kentucky", postalCode: 42420, }] locations.map((item)=>{<p>{item.city}</p>})Supongamos que para el caso anterior quiero obtener el nombre como país , ciudad , eh, ¿cómo hago para extraer esos títulos de objetos? He revisado varias documentaciones y recursos pero no he encontrado una solución clara.
en el mapa, debe devolver el objeto eliminando los corchetes
locations.map(item => <p>{item.city}</p> ) o si mantiene los corchetes, agregue un return explícito
locations.map(item => { return <p>{item.city}</p> })Si desea agregar más a lo que se muestra en la página, puede agregar más campos en el retorno del mapa
locations.map(item => <p>{item.country}, {item.city}, {item.state}, {item.postalCode}</p> )Creo que quiere decir que le gustaría usar los nombres de las propiedades como etiquetas. Si es así, deberá iterar Object.keys() u Object.entries() de cada elemento como una llamada map() anidada. Necesitará un componente contenedor para contenerlo, aquí un elemento externo <div> .
const locations = [ { country: 'United States', city: 'Henderson', state: 'Kentucky', postalCode: 42420, }, ]; locations.map((item) => { <div key={item.unique_property}> {Object.entries(item).map((label, value) => ( <p><span>{label}: </span>{value}</p> ))} </div>; });Lo que generará algo como lo siguiente
<div> <p><span>country: </span>United States</p> <p><span>city: </span>Henderson</p> <p><span>state: </span>Kentucky</p> <p><span>postalCode: </span>42420</p> </div>Sin embargo, a continuación debería funcionar, no se probó.
{locations.map((val) => Object.keys(val?.fields).map((field) => ( <p key={field}> Key : {field} Value:{val?.fields[field]} </p> )) )}