Estos son los datos que estoy recibiendo:
{ market_contract: 'atomicmarket', assets_contract: 'atomicassets', sale_id: '278354', seller: 'stexpr', buyer: null, offer_id: '280670', price: [Object], listing_price: '5000000', listing_symbol: 'XUSDC', assets: [Array], maker_marketplace: 'protonmint', taker_marketplace: null, collection_name: '355532155243', collection: [Object], is_seller_contract: false, updated_at_block: '116895433', updated_at_time: '1646077501500', created_at_block: '116895433', created_at_time: '1646077501500', ordinality: '58', state: 1 }Este es el código que estoy usando para enumerar algunos de los elementos:
const res = await fetch( 'https://proton.api.atomicassets.io/atomicmarket/v1/sales' ); const data = await res.json(); return { props: { data, }, }; } function UserTransactions({ data }) { const results = data; console.log(results); return ( <PageLayout> <div>This is a list of User Transactions!</div> <ul> {results.data.map((result) => { const { sale_id, buyer, seller, assets } = result; return ( <li key={data.id}> <h3> {seller} just sold {sale_id} to {buyer} for{' '} </h3> <img src={assets} alt={sale_id} /> </li> ); })} <li></li> </ul> </PageLayout> ); } export default UserTransactions;Puedo crear elementos de lista de sale_id, comprador y vendedor sin problemas. Los activos, por otro lado, no funcionan. ¿Qué puedo hacer para que aparezca en la lista?
Suposiciones de partes poco claras de la pregunta:
assets es una matriz de cadenas, donde cada cadena es una URL de imagen.<li> por activo por resultado, no 1 <li> por resultado. Entonces no será suficiente tener un .map(...) . Necesita un map interno sobre la matriz de assets de cada resultado. Luego, el mapa externo puede cambiar para ser un .flatMap(...) de modo que "aplana" las matrices individuales del map interno en una sola matriz de <li> elementos.
{results.data.flatMap((result) => { const { sale_id, buyer, seller, assets } = result; return assets.map((asset) => ( <li key={sale_id + '|' + asset}> <h3> {seller} just sold {sale_id} to {buyer} for{' '} </h3> <img src={asset} alt={sale_id} /> </li> )); })} Tenga en cuenta que también he cambiado la key= para que se refiera únicamente a la identidad de los datos enumerados .