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

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!

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

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();

it looks like now I get a result for:

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

Sorry for my amateur, but I havenā€™t understand what should I change on my codeā€¦ :frowning_face:

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:

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

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>

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>

I have changed it, but still no results! Bohā€¦

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