How To Get User NFTs - example code

Moralis General
#1

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/web3@latest/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
#2

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

How to get the nft’s displayed?

#3

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
#4

Thanks team will check

#5

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

#6

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

#7

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

#8

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

#9 
<script src="https://cdn.jsdelivr.net/npm/web3@latest/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>
#10

can anyone guide me ??

#11

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

#14

Here’s the link to the new thread