Loading NFTs in 25_NFT_MARKET_PLACE

Using 25_NFT_MARKET_PLACE Template

After authenticating with Moralis, Brave gives me these errors.

logic.js:167 Uncaught (in promise) ReferenceError: offeringArray is not defined
    at getOfferings (logic.js:167)
    at async populateOfferings (logic.js:159)
getOfferings @ logic.js:167
async function (async)
populateOfferings @ logic.js:159
(anonymous) @ logic.js:12
Promise.then (async)
(anonymous) @ logic.js:10
async function (async)
(anonymous) @ logic.js:7
logic.js:77 GET http://127.0.0.1:5500/%22image%22:%20%22static/Images/4.Hobbit.jpg%22,%20%20%20%20%20%20%20%20%22name%22:%20%22Hobbit%22,%20%20%20%20%20%20%20%20%22description%22:%20%22A%20Hobbit%22 404 (Not Found)
getNFTs @ logic.js:77
async function (async)
getNFTs @ logic.js:74
populateNFTs @ logic.js:65
(anonymous) @ logic.js:11
Promise.then (async)
(anonymous) @ logic.js:10
async function (async)
(anonymous) @ logic.js:7
VM1312:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
async function (async)
populateNFTs @ logic.js:65
(anonymous) @ logic.js:11
Promise.then (async)
(anonymous) @ logic.js:10
async function (async)
(anonymous) @ logic.js:7
logic.js:22 Uncaught (in promise) ReferenceError: subscriptionAlerts is not defined
    at subscribeOfferings (logic.js:22)
subscribeOfferings @ logic.js:22
async function (async)
subscribeOfferings @ logic.js:22
(anonymous) @ logic.js:14
Promise.then (async)
(anonymous) @ logic.js:10
async function (async)
(anonymous) @ logic.js:7
logic.js:31 Uncaught (in promise) ReferenceError: subscriptionAlerts is not defined
    at subscribeBuys (logic.js:31)
subscribeBuys @ logic.js:31
async function (async)
subscribeBuys @ logic.js:31
(anonymous) @ logic.js:15
Promise.then (async)
(anonymous) @ logic.js:10
async function (async)
(anonymous) @ logic.js:7
logic.js:41 Uncaught (in promise) ReferenceError: subscriptionAlerts is not defined
    at subscribeUpdateNFTs (logic.js:41)

Focusing on getting the URI working properly and importing known NFTs onto the market place.

This is my token URI

{
    "name": "hobbit",
    "image": "static/Images/4.Hobbit.jpg",
    "description": "A Hobbit!"
}

Hi @IntrepidShape

What does the fetch function do?

It came with the template.

fetch the Metadata .json file from it’s URL.

fetch is a vanilla JS function right?
https://javascript.info/fetch

Perhaps this is throwing an error because the 1.json (the metadata) is stored locally for testing.

Oh, I see. I just wanted to confirm that it’s not a custom function.

Can you try this instead data[i]["token_uri"]

Thanks that worked.

I’ve also see that in this codebase the “let” declaration is not always implemented on the for loops

I just fixed that.

Update:

New error.

logic.js:77 GET http://127.0.0.1:5500/undefined 404 (Not Found)
getNFTs	@	logic.js:77

logic.js line 77

const metadataInfo = await fetch(data[i]["token_uri"]); 

it looks like it tries to access the link with name undefined, maybe data[i]["token_uri"] returns undefined, you could use console.log(data[i]["token_uri"]) to see what is there

Returns undefined.

async function getNFTs() {
    const queryAll = new Moralis.Query("PolygonNFTOwners");
    queryAll.equalTo("owner_of", ethereum.selectedAddress);
    const data = await queryAll.find()
    const nftArray = [];
    for (let i = 0; i < data.length; i++) {
        console.log(data[i]["token_uri"]);
        const metadataInfo = await fetch(data[i]["token_uri"]); 
        const metadata = await metadataInfo.json();
        const nft = { "object_id": data[i].id, "token_id": data[i].get("token_id"), "token_uri": data[i].get("token_uri"), "contract_type": data[i].get("contract_type"), "token_address": data[i].get("token_address"), "image": metadata["image"], "name": metadata["name"], "description": metadata["description"] }
        nftArray.push(nft)
    }
    return nftArray;
}

what you get if you use console.log(data[i]) ?

ParseObject {id: 'uXmEb7C7A8BNOvCBdHnaCIDW', _localId: undefined, _objCount: 2, className: 'PolygonNFTOwners'}
className: "PolygonNFTOwners"
id: "uXmEb7C7A8BNOvCBdHnaCIDW"
_localId: undefined
_objCount: 2
attributes: (...)
createdAt: (...)
updatedAt: (...)
[[Prototype]]: Object

This perhaps?

_localId: undefined

you could try to use console.log(JSON.stringify(data[i])), maybe it displays it better

{"token_uri":"\"image\": \"static/Images/4.Hobbit.jpg\",\n \"name\": \"Hobbit\",\n \"description\": \"A Hobbit\"","amount":"2","token_id":"123","token_address":"0xa07e45a987f19e25176c877d98388878622623fa","owner_of":"0x126987cd270c8ef85d35a5382173eab0e25ab076","block_number":21416240,"contract_type":"ERC1155","createdAt":"2021-11-13T14:10:27.681Z","updatedAt":"2021-11-13T15:58:03.297Z","objectId":"uXmEb7C7A8BNOvCBdHnaCIDW"}

That looks strange, token_uri seems to point to some kind of metadata.

Oh, yeah.

It should point to a json file.

I minted a bad one with metadata for a uri

before I minted a good one.

I think the bad one is breaking the website…wonderful.

The problem is fetch()

Added a Try, Catch to skip if it doesn’t work.

Now at least it is picking up all the tokens.

The first ERC1155 is from the polygon test faucet.

async function getNFTs() {
    const queryAll = new Moralis.Query("PolygonNFTOwners");
    queryAll.equalTo("owner_of", ethereum.selectedAddress);
    const data = await queryAll.find()
    const nftArray = [];
    for (let i = 0; i < data.length; i++) {
        console.log(JSON.stringify(data[i]));
        try {
            const metadataInfo = await fetch(data[i]["token_uri"]); 
            const metadata = await metadataInfo.json();
            const nft = { "object_id": data[i].id, "token_id": data[i]["token_id"], "token_uri": data[i]["token_uri"], "contract_type": data[i]["contract_type"], "token_address": data[i]["token_address"], "image": metadata["image"], "name": metadata["name"], "description": metadata["description"] }
            nftArray.push(nft)
        }
        catch(err) {
            console.log(err);
            continue;
        }
    }
    return nftArray;
}

Now This