How To Get User NFTs - example code

Hi,

For the video: How To Get User NFTs? All NFTs Owned by Address

Create a Moralis Mainnet server with all 3 chains (Eth, Polygon, Bsc)
In the code : replace the “–APPLICATION ID–” and “–SERVERURL–” with those of your Moralisserver.

Example code (extended as in video):

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <!-- Moralis SDK code -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
  </head>
  <body>
    <h1>NFT Explorer</h1>

    <p>
      Address: <input type="text" id="address" size="64" maxlength='64' /><br />
      Chain: <select id="chain">
        <option value="">Make choice...</option>
        <option value="eth">ETH</option>
        <option value="bsc">BSC</option>
        <option value="polygon">Polygon</option>
      </select><br />
      <button id="btnUpdate">Update</button>
    </p>

    <h3>Content</h3>
    <div id="content"></div>

    <script>
      // connect to Moralis server
      Moralis.initialize("--APPLICATION ID--");
      Moralis.serverURL = "--SERVERURL--";

      async function getNFTs(chain, address) {
        // get polygon NFTs for address
        const options = { chain: chain, address: address };

        var maxnr = 5;
        const nftCount = await Moralis.Web3.getNFTsCount(options);
        $("#content").html("<p>Items count: " + nftCount + " (max " + maxnr + " listed)</p>");

        if (nftCount > 0) {
          const allNFTs = await Moralis.Web3.getNFTs(options);
          //console.log(allNFTs);

          allNFTs.forEach( (nft) => {
            if (maxnr > 0) {
              fetch(fixURL(nft.token_uri))
                .then(response => response.json())
                .then(data => {
                  $("#content").html($("#content").html() 
                    + "<div><img width='100' align='left' src='" + fixURL(data.image) + "' />"
                    + "<h2>" + data.name + "</h2>"
                    + "<p>" + data.description + "</p></div><br clear='all' />");
                });
            }
            maxnr--;
          });
        }
      }

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

      document.getElementById("btnUpdate").onclick = () => {
        console.log("Update!");
        let chain = $("#chain").val();
        let address = $("#address").val();
        console.log("Update! chain="+chain+" address="+address);
        if (typeof chain !== 'undefined' && typeof address != 'undefined') {
          getNFTs(chain, address);
        }
      }
    </script>
  </body>
</html>

Have a nice day !

6 Likes

I get this in my page Items count: 0 (max 5 listed).

How to get the nft’s displayed?

Getting an error

(index):1 Access to XMLHttpRequest at 'https://cwujyh2mhuhv.moralis.io:2053/server/functions/getNFTsCount' from origin 'https://nftscreener.psychon7.repl.co' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

moralis.js:21595 POST https://cwujyh2mhuhv.moralis.io:2053/server/functions/getNFTsCount net::ERR_FAILED

||dispatch|@|moralis.js:21595|
| --- | --- | --- | --- |
||ajax|@|moralis.js:21602|
||(anonymous)|@|moralis.js:21706|
||Promise.then (async)|||
||request|@|moralis.js:21700|
||run|@|moralis.js:427|
||run|@|moralis.js:353|
||value|@|moralis.js:4974|
||getNFTs|@|(index):35|
||document.getElementById.onclick|@|(index):72|
1 Like

Thanks team will check

So, it worked after a few tries, but everytime it takes a few tries

Can you provide one of the addresses that are causing this?

The ETH address i used to test the code “0x39cc9c86e67baf2129b80fe3414c397492ea8026”