How to get NFT from a uri link in javascript?

Question

I have this code here

for (let i=0; i < data.length; i++){
    
      
       console.log(data[i].token_uri)
    let row = `<tr>
                    <td>${data[i].token_id}</td>
                    <td>${data[i].contract_type}</td>
                    <td><h4>${data[i].token_address}</h4></td>
                    <td>${data[i].token_uri}</td>
                    
                </tr>`
                
    table.innerHTML += row

}

when I run it I get back the token-uri of an nft which is what I want however the token-uri doesnt contain the image

when doing

console.log(data[i].token_uri)

this is the urls I get back for example:

https://ipfs.moralis.io:2053/ipfs/bafkreic47njf53ueqgsrtuqh4jtqzcxfheiifilnypfjckvqtyiwefjr2y

but now I need to access this url because the actual image is here:

{"name": "Elon Weed", "description": "Elon Musk smokes weed on Joe Rogan", "image": "https://preview.redd.it/0hkeya69rx421.jpg?width=779&format=pjpg&auto=webp&s=1b562656f081d8424e09c7eca6373f8b78891428", "properties": {"level": "2"}}

and in my table I would like to only display the actual image

https://preview.redd.it/0hkeya69rx421.jpg

how can I get this data and than display it in my table?

This is the code I tried so far:

async function populate(){
    const nft = await Moralis.Web3API.account.getNFTs({chain: 'matic'}).then(buildTableNFT);
    

}

function buildTableNFT(_data){
    let data = _data.result;
    document.getElementById("resultNFT").innerHTML = `<table class="table table-dark table-striped" id="nftTable">
                                                            </table>`;
    const table = document.getElementById("nftTable");
    const rowHeader = `<thead>
                            <tr>
                                <th>ID</th>
                                <th>Type</th>
                                <th>Contract</th>
                                <th>Image</th>
                            </tr>
                        </thead>`
    table.innerHTML += rowHeader;
    for (let i=0; i < data.length; i++){
        
          
           console.log(data[i].token_uri)
        let row = `<tr>
                        <td>${data[i].token_id}</td>
                        <td>${data[i].contract_type}</td>
                        <td><h4>${data[i].token_address}</h4></td>
                        <td>${data[i].token_uri}</td>
                        
                    </tr>`
                    
        table.innerHTML += row
    
    }
}

Retrieve the JSON data from the original URL via an asynchronous request (`XMLHttpRequest` / `fetch` / Axios) and extract the `image` property — Phil, Feb 21 '22 at 22:11
I think it would be better if _you_ posted some code that you tried, then we can help you debug any problems — Phil, Feb 21 '22 at 22:13

Kyriazis · Answer 1 · 2022-02-22T14:24:54.487

-1

You would need to fetch the ipfs url you get. You would store the result of the fetch in a variable called response, then you can do console.log(response['image']) and it would give you the url of the image. BTW you need the full url of the image to access it: https://preview.redd.it/0hkeya69rx421.jpg?width=779&format=pjpg&auto=webp&s=1b562656f081d8424e09c7eca6373f8b78891428. Here is a code sample in javascript:

fetch(data[i].token_uri).then(res => {
  res.json().then((res) => {
    console.log(res.image); // this should print the url to console
  });
});

edited Feb 22 '22 at 14:24

answered Feb 21 '22 at 22:11

Kyriazis

71
6

Whilst this may theoretically answer the question, [it would be preferable](//meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Phil Feb 21 '22 at 22:12
please post a code example and yes you are correct I shortened the url – Joe Blow Feb 21 '22 at 22:13
@Phil Do you think I should explain how to use fetch in my answer? – Kyriazis Feb 21 '22 at 22:15
well a code example would be nice based on my code – Joe Blow Feb 21 '22 at 22:16
@Kyriazis yes. Pretend that at some point in the future the MDN site disappears and your link becomes broken. That being said, this question has been closed as a duplicate that has many examples already – Phil Feb 21 '22 at 22:17
@JoeBlow added the code snippet – Kyriazis Feb 21 '22 at 22:21
Your code is incorrect. It should be `res.json().then(...)` – Phil Feb 22 '22 at 00:01
Ah yes you are right – Kyriazis Feb 22 '22 at 00:13
1

`res.json()` is all lowercase – Phil Feb 22 '22 at 14:10

How to get NFT from a uri link in javascript?

1 Answers1