This is the data I'm receiving:
{
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
}
This is the code I'm using to list some of the items out:
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;
I'm able to create list items of sale_id,buyer, and seller just fine. Assets, on the other hand, does not work. What can I do to make it list out?
Assumptions from unclear parts of the question:
assets is an array of strings, where each string is an image URL.<li> per asset per result, not 1 <li> per result.Then it will not be enough to have one .map(...). You need an inner map over each result's assets array. Then the outer map can change to be a .flatMap(...) so that it "flattens" the inner map's individual arrays into a single array of <li> items.
{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>
));
})}
Note have I have also changed the list element key= so that it uniquely refers to the identity of the listed data.