"Cannot read properties of undefined (reading 'token')" error on "Moralis.Web3API.token.getAllTokenIds" line

[noel_m11]

Hello to all!

I’m trying the “Ultimate NFT Programming Tutorial - FULL COURSE” from Moralis Web3 Youtube, but I’m having a problem to retrieve “getAllTokensIds”: when I open with Live Server the return is empty and it does not show the NFT created, it shows just blank. What can be this problem? I have checked several times and I think I have done everything ok (created my test server, created my cloud function and everything else). I searched so much to understand the problem but now I feel like I am giving up. Please if you can help me!

Thanks a lot in advance!

[cryptokid]

can you paste what you have in options there for getAllTokenIds?

[noel_m11]

Thanks for your reply @cryptokid!

Here my main.js:

Moralis.initialize (“RFT8asCRdZDwwvoweVO735eB28ICP5qDi4sO5W43”);

Moralis.serverURL = “https://9hafjo6ivsjx.usemoralis.com:2053/server”;

function fetchNFTMetadata(NFTs){

let promises = [];

for (let i = 0; i < NFTs.length; i++) {

    let nft = NFTs[i];

    let id = nft.token_id;  

    //Call Moralis Cloud function -> Static JSON file

   promises.push(fetch("https://9hafjo6ivsjx.usemoralis.com:2053/server/functions/getNFT?_ApplicationId=RFT8asCRdZDwwvoweVO735eB28ICP5qDi4sO5W43&nftId=" + id)

    .then(res => res.json())

    .then(res => JSON.parse(res.result))

    .then(res => {nft.metadata = res})

    .then( () => {return nft;}))

}

return Promise.all(promises);

}

function renderInventory(NFTs){

const parent = document.getElementById("app");

for (let i = 0; i < NFTs.length; i++) {

    const nft = NFTs[i];

    let htmlString = `

    <div class="card" style="width: 18rem;">

    <img class="card-img-top" src="${nft.metadata.image}" alt="Card image cap">

    <div class="card-body">

      <h5 class="card-title">${nft.metadata.name}</h5>

      <p class="card-text">${nft.metadata.decription}</p>

      <a href="#" class="btn btn-primary">Go somewhere</a>

    </div>

    </div>

    `

    let col = document.createElement("div");

    col.className = "col col-md-3"

    col.innerHTML = htmlString;

    parent.appendChild(col);

}

}

async function initializeApp(){

let currentUser = Moralis.User.current();

if(!currentUser){

    currentUser = await Moralis.Web3.authenticate();

}

const options = { address:"0x323e4aec236d77615ce1ab8f35d12437b81733ca", chain:"rinkeby"};

let NFTs = await Moralis.Web3API.token.getAllTokenIds(options);

let NFTWithMetadata = await fetchNFTMetadata(NFTs.result);

renderInventory(NFTWithMetadata);

}

initializeApp();

[cryptokid]

it looks like now I get a result for:

options = { address:"0x323e4aec236d77615ce1ab8f35d12437b81733ca", chain:"rinkeby"}
NFTs = await Moralis.Web3API.token.getAllTokenIds(options)

[noel_m11]

Sorry for my amateur, but I haven’t understand what should I change on my code…

[cryptokid]

ok, I thought that you had a different problem

first you have to use a new syntax with Moralis.start instead of Moralis.initialize
you can find an example here:

demo-apps/moralis-vanilla-boilerplate at main · MoralisWeb3/demo-apps

second: you can see here how to post code on forum:

READ BEFORE POSTING - How to post code in the forum

How to post readable code in the forum You can use the “Preformatted Text” button to encapsulate any kind of code you want to show in your post. The demonstration, below, shows you how, and what the formatted code will look like: function formatText() { let words = "I'm a preformatted text button. Please use me wisely!"; } [image] [preformatted text]

[noel_m11]

Thank you @cryptokid!
I am still not finding where the prolem is.

main.js code:

const serverUrl = "https://9hafjo6ivsjx.usemoralis.com:2053/server";

const appId = "RFT8asCRdZDwwvoweVO735eB28ICP5qDi4sO5W43";

Moralis.start({ serverUrl, appId });

function fetchNFTMetadata(NFTs){

    let promises = [];

    for (let i = 0; i < NFTs.length; i++) {

        let nft = NFTs[i];

        let id = nft.token_id;  

        //Call Moralis Cloud function -> Static JSON file

       promises.push(fetch("https://9hafjo6ivsjx.usemoralis.com:2053/server/functions/getNFT?_ApplicationId=RFT8asCRdZDwwvoweVO735eB28ICP5qDi4sO5W43&nftId=" + id)

        .then(res => res.json())

        .then(res => JSON.parse(res.result))

        .then(res => {nft.metadata = res})

        .then( () => {return nft;}))

    }

    return Promise.all(promises);

}

function renderInventory(NFTs){

    const parent = document.getElementById("app");

    for (let i = 0; i < NFTs.length; i++) {

        const nft = NFTs[i];

        let htmlString = `

        <div class="card" style="width: 18rem;">

        <img class="card-img-top" src="${nft.metadata.image}" alt="Card image cap">

        <div class="card-body">

          <h5 class="card-title">${nft.metadata.name}</h5>

          <p class="card-text">${nft.metadata.decription}</p>

          <a href="#" class="btn btn-primary">Go somewhere</a>

        </div>

        </div>

        `

        let col = document.createElement("div");

        col.className = "col col-md-3"

        col.innerHTML = htmlString;

        parent.appendChild(col);

    }

}

 

async function initializeApp(){

    let currentUser = Moralis.User.current();

    if(!currentUser){

        currentUser = await Moralis.Web3.authenticate();

    }

    const options = { address:"0x323e4aec236d77615ce1ab8f35d12437b81733ca", chain:"rinkeby"}

    let NFTs = await Moralis.Web3API.token.getAllTokenIds(options)

    let NFTWithMetadata = await fetchNFTMetadata(NFTs.result);

    renderInventory(NFTWithMetadata);

}

initializeApp();

index.html code:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <script src="https://npmcdn.com/[email protected]/dist/moralis.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  </head>

  <body>

    <div class="jumbotron jumbotron-fluid">

      <div class="container">

        <h1 class="display-4">Museum of Digital Art (MoDA)</h1>

      </div>

    </div>

    <div class="container">

        <div class="row" id="app"></div>

    </div>

    <script type="text/javascript" src="./main.js"></script>

  </body>

</html>

[cryptokid]

@noel_m11

<script src="https://npmcdn.com/[email protected]/dist/moralis.js"></script>

this is not good, it is a super old version
for latest version you can use:
<script src="https://npmcdn.com/moralis@latest/dist/moralis.js" ></script>

[noel_m11]

I have changed it, but still no results! Boh…

[cryptokid]

there may be multiple problems, this was one of them

you can add some logging now with console.log to see what it is happening, look in browser console for any errors