Iterating over images doesnt work, javascript

Question

I have this code and it works giving me the url of the images in the console.

but it doesn't print out images on my site

for (let i=0; i < data.length; i++){
        let url = data[i].token_uri
        fetch(url)
        .then(response => response.json())
        .then(data => console.log(data['image']));

          
           
        let row = `<tr>
                    <td>${data[i].token_id}</td>
                    <td>${data[i].contract_type}</td>
                    <td><h4>${data[i].token_address}</h4></td>
                    <td><img src=${data['image']}></td>
                    
                </tr>`
                
    table.innerHTML += row

}

I also tried let images = data['image']

and than use the images variable in my row

here is the full code, maybe this helps someone to give me a correct answer

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++){
        let url = data[i].token_uri
        fetch(url)
        .then(response => response.json())
        .then(data => console.log(data['image']));
        let images = data['image']
          
           
        let row = `<tr>
                        <td>${data[i].token_id}</td>
                        <td>${data[i].contract_type}</td>
                        <td><h4>${data[i].token_address}</h4></td>
                        <td><img src="${images}"></td>
                        
                    </tr>`
                    
        table.innerHTML += row
    
}

}

Answer 1

you can fetch all the data parallel and then build the html. It will be much faster.

function buildTableNFT(_data){
    let data = _data.result;

    const promises = data.map(({ token_uri }) => fetch(token_uri).then(res => res.json()));

    Promise.all(promises).then(images => {
        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++){            
            let row = `<tr>
                            <td>${data[i].token_id}</td>
                            <td>${data[i].contract_type}</td>
                            <td><h4>${data[i].token_address}</h4></td>
                            <td><img src="${images[i]['image']}"></td>
                            
                        </tr>`
                        
            table.innerHTML += row
        }
    });
    
}

Answer 2

Here's how you use async/await with your code

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

async function buildTableNFT({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 < result.length; i++) {
        let url = result[i].token_uri;
        const response = await fetch(url);
        const data = await response.json();
        const image = data.image;
        const row = `
            <tr>
                <td>${result[i].token_id}</td>
                <td>${result[i].contract_type}</td>
                <td><h4>${result[i].token_address}</h4></td>
                <td><img src="${image}"></td>
            </tr>
        `;
        table.innerHTML += row;
    }
}

Answer 3

The concern is that your ${data['image']} is not accessible outside the context of the .then() promise.

for (let i=0; i < data.length; i++){
        let url = data[i].token_uri
        
        fetch(url)
        .then(response => response.json())
        .then(item=> {
        
          let row = `<tr>
                    <td>${data[i].token_id}</td>
                    <td>${data[i].contract_type}</td>
                    <td><h4>${data[i].token_address}</h4></td>
                    <td><img src=${item['image']}></td>
                    
                </tr>`
                table.innerHTML += row
        });
}