Tengo una lista de objetos de datos como
datos:
[ { "postId": 1, "id": 1, "name": "id labore ex et quam laborum", "email": "Eliseo@gardner.biz", "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium" }, { "postId": 1, "id": 2, "name": "quo vero reiciendis velit similique earum", "email": "Jayne_Kuhic@sydney.com", "body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et" } ]Quiero obtener el valor del nombre de los datos.
código:
return( <Fragment> {Object.keys(cardData).map((keys)=>{ <li>{cardData[keys].name}</li> })} </Fragment> ) pero no obtengo ningún dato a cambio. Cuando uso map para iterarlo. Un error me muestra que cardData.map is not a function . por favor ayúdame a resolver el problema
Un par de problemas:
Debe agregar explícitamente una declaración de return en la función de devolución de llamada del método map()
return <li>{cardData[keys].name}</li> cardData parece ser una matriz. Si ese es el caso, entonces no es necesario usar Object.keys(...) . Llame al método map() directamente en la matriz
{cardData.map((obj) => { return <li>{obj.name}</li> })} La opción alternativa es eliminar los corchetes. Esto le permitirá eliminar la palabra clave de return y el li se devolverá implícitamente
{cardData.map((obj) => <li>{obj.name}</li>)} Nota: no olvides agregar la key en el elemento li :
{cardData.map((obj) => ( <li key={obj.id}>{obj.name}</li> ))} Si cardData no es una matriz y es solo un objeto de la siguiente forma:
{ "postId": 1, "id": 1, "name": "id labore ex et quam laborum", ... }luego usa el siguiente código:
{Object.keys(cardData).map(key => { return <li>{cardData[key].name}</li> })}O utilice el retorno implícito eliminando las llaves:
{Object.keys(cardData).map(key => ( <li>{cardData[key].name}</li> ))}Tienes que return explícitamente los valores del map .
Dado que cardData ya es una matriz, puede usar el mapa directamente en las matrices, no es necesario tomar las claves y luego procesarlas para obtener el name .
<> <ul> {cardData.map((o) => { return <li key={o.id}>{o.name}</li>; })} </ul> </>Funciona de maravilla !
export default function App() { var cardData = [ { "postId": 1, "id": 1, "name": "id labore ex et quam laborum", "email": "Eliseo@gardner.biz", "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium" }, { "postId": 1, "id": 2, "name": "quo vero reiciendis velit similique earum", "email": "Jayne_Kuhic@sydney.com", "body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et" } ]; return ( <div className="App"> {Object.keys(cardData).map((keys)=> {return <li>{cardData[keys].name}</li>})} </div> ); }