First Dapp - NFT metadata error

Moralis General
#1

Hi everyone,

finishing up chris Bs course on YT how to create your first dapp.

In the last section of NFTs im following his video but get thrown the following error:

Screen Shot 2021-09-20 at 12.13.04 PM

it has to do with the ${metadata.name} method in h5; same goes for ${metadata.description} as well as img source with ${fixURL(metadata.image_url)}

the code herefore is

getNFTs = async () => {

console.log("get NFTs");

const nfts = await Moralis.Web3API.account.getNFTs({ chain: 'matic' });
console.log(nfts);
let tableOfNFTs = document.getElementById(tableOfNfts);

if(nfts.result.length > 0){
    nfts.result.forEach(n=>{
        console.log(JSON.parse(n.metadata));
        let metadata = JSON.parse(n.metadata);
        let content = `
        
            <div class="card col-md-3">
                <img src="#" class="card-img-top" height=300>
                    <div class="card-body">
                        <h5 class="card-title">${metadata.name}</h5>
                        <p class="card-text">DESCRIPTION</p>
                        <a href="#" class="btn btn-primary">Useless Button</a>
                    </div>
            </div>
        `
       tableOfNfts.innerHTML += content;

        })
    }
}

fixURL = (url) => {
    if (url.startsWith("ifps")){
        return "https://ipfs.moralis.io:2053/ipfs/" + url.split("ipfs://").slice(-1)
    }
    else {
        return url + "?format=json"
    }
}

What am i missing? thanks for your help!

#2

what you see as output on console for that line?

#3

@cryptokid

Screen Shot 2021-09-20 at 12.22.32 PM
Screen Shot 2021-09-20 at 12.22.32 PM1024×1012 228 KB

#4

Then it looks like you have a name field there.

#5

ok, how do i fix it ?

#6

also, when i use ${fixURL(metadata.image_url)} for SRC of image it throws the following:

Screen Shot 2021-09-20 at 12.35.37 PM

#7

It looks for me like you are doing something wrong later in the code.
This was a working example: How To Get User NFTs? All NFTs Owned by Address - @Ivan on Tech Explains at some moment in time.

#8

Hold up,

when i use img src ${metadata.image_url} like so:

code

if(nfts.result.length > 0){
    nfts.result.forEach(n => {
        console.log(JSON.parse(n.metadata));
        let metadata = JSON.parse(n.metadata);
        let content = `
        
            <div class="card col-md-3">
                <img src="${metadata.image_url}" class="card-img-top" height=300>
                    <div class="card-body">
                        <h5 class="card-title">${metadata.name}</h5>
                        <p class="card-text">${metadata.description}</p>
                        <a href="#" class="btn btn-primary">Useless Button</a>
                    </div>
            </div>
        `
       tableOfNfts.innerHTML += content;

        })
    }
}

fixURL = (url) => {
    if (url.startsWith("ifps")){
        return "https://ipfs.moralis.io:2053/ipfs/" + url.split("ipfs://").slice(-1)
    }
    else {
        return url + "?format=json"
    }
}

it actually gives me name & description but no image like that:

Screen Shot 2021-09-20 at 12.42.03 PM
Screen Shot 2021-09-20 at 12.42.03 PM1962×1136 431 KB

So i go along and do the ${fixURL(metadata.image_url} version like so:

let content = `
        
            <div class="card col-md-3">
                <img src="${fixURL(metadata.image_url)}" class="card-img-top" height=300>
                    <div class="card-body">
                        <h5 class="card-title">${metadata.name}</h5>
                        <p class="card-text">${metadata.description}</p>
                        <a href="#" class="btn btn-primary">Useless Button</a>
                    </div>
            </div>
        `
       tableOfNfts.innerHTML += content;

        })
    }
}

fixURL = (url) => {
    if (url.startsWith("ifps")){
        return "https://ipfs.moralis.io:2053/ipfs/" + url.split("ipfs://").slice(-1)
    }
    else {
        return url + "?format=json"
    }
}

and it will throw the following error:

Screen Shot 2021-09-20 at 12.43.22 PM

how do i make it understand “startsWith”?

#9

It looks like you don’t have image_url field there, I see image in your screenshot.

#10

right so if i do ${metadata.image}
it would display one NFT out of the 12. Looks like this one being displayed is of another type than the others:

Screen Shot 2021-09-20 at 12.48.39 PM
Screen Shot 2021-09-20 at 12.48.39 PM1970×1728 699 KB

how do i merge two different types of nfts + the fixURL function that aint working right now?

#11

You add some javascript code that identifies each case.