lesson 15 nextjs front end when try to get tokenURI from contract its show undefined

[AnsarQureshi1]

the problem is every thing is working fine but the thing that I want is image URI it show undefined in the console log I watched that part again and again but all in vain kindly help me to get out of this

[alymurtazamemon]

@AnsarQureshi1 Manually add the ABI for Basic NFT to your frontend side. If you do not know where to find ABI let me know.

[alymurtazamemon]

@AnsarQureshi1 Also add contract and frontend projects links with your question, if it did not resolve.

[AnsarQureshi1]

I tried it manually but I did'nt get tokenURI how to resolve it

[alymurtazamemon]

@AnsarQureshi1 Give me your repo link

[AnsarQureshi1]

@alymurtazamemon https://github.com/AnsarQureshi1 check that why tokenURI is not getting in frontend console

[AnsarQureshi1]

@alymurtazamemon any updates??

[astr0-g]

are you trying this on another chain? or other nft collections?

[AnsarQureshi1]

@astr0-g I am trying this locally

[SebasAran16]

Could you solve? I am having the same issue...

[JamesMckenna]

@SebasAran16

Add a link to your repo so I can copy/paste your exact code with an explanation on how to solve the error.

[SebasAran16]

Thank you very much!

https://github.com/SebasAran16/hardhat-nft-marketplace-fcc
https://github.com/SebasAran16/nextjs-nft-marketplace-fcc

[JamesMckenna]

@SebasAran16

I may have spoke too soon. As it turns out, you are working on the Moralis part of getting indexed data from the blockchain. When I went through lesson 15, I didn't run any of the code as I couldn't find the Create Server button on the Moralis UI page. I just wrote the code and moved on to lesson 15.3 the uses theGraph to do the same thing as Moralis Server. As a result, I can't run your code without creating a Moralis Server.

As for the Warning in the OP's screen shot, to stop that try changing where your key is

    return (
        <div className={styles.container}>
            {fetchingListedNfts ? (
                <div>Loading...</div>
            ) : (
                listedNfts.map((nft) => {
                    console.log(nft.attributes);
                    const { price, nftAddress, tokenId, marketplaceAddress, seller } =
                        nft.attributes;
                    return (
                        <div key={`${nftAddress}${tokenId}`} > <-- move your key here
                            Price: {price}. NftAddress: {nftAddress}. Token ID: {tokenId}.
                            Marketplace Address: {marketplaceAddress}. Seller: {seller}
                            <NFTBox
                                price={price}
                                nftAddress={nftAddress}
                                tokenId={tokenId}
                                marketplaceAddress={marketplaceAddress}
                                seller={seller}
                                
                            />
                        </div>
                    );
                })
            )}
        </div>
    );

If moving your key stops the warning from showing in the console, I should be able to explain why.

[SebasAran16]

Ahh ok, thank you for the intention though. If you maybe wanna try the Moralis part is hidden, you will find it in admin.moralis.io/dapps.
Getting the URI as undefined still @alymurtazamemon , do you maybe know what the issue could be? Thank you again...

[SebasAran16]

Omggggg, nevermind, thank you again. It was an additional "s" on a declaration of the nftAddress in the database for ActiveItem so of course it was undefined... These things are the hardest to see. Thanks again!!