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”

I am not able to display the nft ?I only get the count displayed in browser .Is there something to do with the cloud function why the nfts are not displaying in browser

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

NFT Explorer

<p>
  Address: <input type="text" id="address" size="64" maxlength='64' /><br />
  <button id="btnUpdate">Update</button>
</p>

<h3>Content</h3>
<div id="content"></div>
<script>
   
    const serverUrl = " ur server";
    const appId = "ur app id";
    Moralis.start({ serverUrl, appId });

    async function getNFTs(chain, address) {
     
      const options = { chain: chain, address: address };
      const nftCount = await Moralis.Web3API.account.getNFTsCount(options);
      $("#content").html("<p>Items count: " + nftCount + " </p>");
      if (nftCount > 0) {
        const allNFTs = await Moralis.Web3API.account.getNFTs(options);
        console.log(allNFTs);
        allNFTs.forEach( (nft) => {
          let url=fixURL(nft.token_uri);
            fetch(url)
              .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' />");
              });
        });
      }
    }

    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>

can anyone guide me ??

you should create a new forum thread, with the error that you get, from what line you get that error

Here’s the link to the new thread