[SOLVED] Testing servers (using ganache local) sometimes there not being rendered data

Technical Issue Reporting
#1

Hi, I want to ask if for testing servers (using ganache local) sometimes there not being rendered data.

Server; https://zjvbnysw1ygx.grandmoralis.com:2053/server
Code:

getAndRenderItemData = (item, renderFunction) => {
    fetch(item.tokenUri)
    .then(response => response.json())
    .then(data => {
        item.name = data.name;
        item.description = data.description;
        item.image = data.image;
        item.type = data.type;
        renderFunction(item);
    })
}
loadItemsForSale = async () => {
    const items = await Moralis.Cloud.run("getItemsForSale");
    user = await Moralis.User.current();
    items.forEach(item => {
        if (user){
            if (user.attributes.accounts.includes(item.ownerOf)){
                const userItemListing = document.getElementById(`user-item-${item.tokenObjectId}`);
                if (userItemListing) userItemListing.parentNode.removeChild(userItemListing);
                getAndRenderItemData(item,renderUserItem);
                return;
            }
        }
    })
}


renderUserItem = async (item) => {
    user = await Moralis.User.current();
    const userItemListing = document.getElementById(`user-item-${item.tokenObjectId}`);
    if (userItemListing) return;
    
    const userInventory = userInventoryTemplate.cloneNode(true);
    userInventory.getElementsByTagName("img")[0].src = item.image;
    userInventory.getElementsByTagName("img")[0].alt = item.name;
    userInventory.getElementsByTagName("img")[1].src = user.get('avatar').url();;
    userInventory.getElementsByTagName("img")[1].alt = user.get('username');
    userInventory.getElementsByTagName("h5")[0].innerText = item.name;
    userInventory.getElementsByTagName("h6")[0].innerText = item.description;
    userInventory.getElementsByTagName("span")[0].innerText = item.askingPrice;

    userInventory.id = `user-item-${item.tokenObjectId}`
    userInventories.appendChild(userInventory);
}

Because when I load sometimes they have price, sometimes they don’t. and the ordering are not the same maybe because some data loads faster some aren’t?

Screen Shot 2021-10-13 at 4.09.37 AM
Screen Shot 2021-10-13 at 4.09.37 AM1026×1188 137 KB

Screen Shot 2021-10-13 at 4.10.20 AM
Screen Shot 2021-10-13 at 4.10.20 AM1086×1026 125 KB

#2

you can put a console.log(items) to see if you get different things there
maybe the problem is in another place, like maybe fetch(item.tokenUri) doesn’t work every time

#3

Screen Shot 2021-10-13 at 4.37.07 AM
Screen Shot 2021-10-13 at 4.37.07 AM772×226 34.3 KB

#4

I mean you get every time what you expect to get here with console.log(items) or something unexpected?

#5

i notice

this code if I remove it, it displays both undefined and with asking price

 const userItemListing = document.getElementById(`user-item-${item.tokenObjectId}`);**
  if (userItemListing) return;


renderUserItem = async (item) => {
    user = await Moralis.User.current();
    const userItemListing = document.getElementById(`user-item-${item.tokenObjectId}`);**
  if (userItemListing) return;
    
    const userInventory = userInventoryTemplate.cloneNode(true);
    userInventory.getElementsByTagName("img")[0].src = item.image;
    userInventory.getElementsByTagName("img")[0].alt = item.name;
    userInventory.getElementsByTagName("img")[1].src = user.get('avatar').url();;
    userInventory.getElementsByTagName("img")[1].alt = user.get('username');
    userInventory.getElementsByTagName("h5")[0].innerText = item.name;
    userInventory.getElementsByTagName("h6")[0].innerText = item.description;
    userInventory.getElementsByTagName("span")[0].innerText = item.askingPrice;

    userInventory.id = `user-item-${item.tokenObjectId}`
    userInventories.appendChild(userInventory);
}
#6

what if you comment those two lines above getAndRenderItemData(item,renderUserItem); ?

#7

it removes the items with the price

#8

I even tried the code from the github. Still the same result. randomly load data, I think what is happening is whichever “Render” from main.js loads first that is going to be rendered.

I think it got something to do with the server?

#9

Thank you so much for your help! @cryptokid I solve it by

Putting the code of loadUserInventory in loadItemsForSale. So they both load at the same time. I believe for some reason 2 async function are having a bit of an overlap to the other. resulting sometimes the getInventory was loaded first or was loaded last.

loadUserInventory = async () => {
const ownedItems = await Moralis.Cloud.run(“getInventory”);
ownedItems.forEach(item =>{
getAndRenderItemData(item,renderUserItem);
})
}


loadItemsForSale = async () => {
    const items = await Moralis.Cloud.run("getItemsForSale");
    user = await Moralis.User.current();
    items.forEach(item => {
        if (user){
            if (user.attributes.accounts.includes(item.ownerOf)){
                const userItemListing = document.getElementById(`user-item-${item.tokenObjectId}`);
                if (userItemListing) userItemListing.parentNode.removeChild(userItemListing);
                getAndRenderItemData(item,renderUserItem);
                return;
            }
        }
    })
    
    const ownedItems = await Moralis.Cloud.run("getInventory");
    ownedItems.forEach(item =>{
       getAndRenderItemData(item,renderUserItem);
    })
    
}