How to print sellerUsername bellow avatar? - CloneRarible [SOLVED]

Moralis General
#1

Hi, I don’t understand why I get undefined when trying to print the sellerUsername bellow the avatar. How can I modify the renderItem and getAndRenderItemData in order to print the sellerUsername?
Thanks in advanced

paste it here the original renders:

renderItem = (item) => {
    const itemForSale = marketplaceItemTemplate.cloneNode(true);
    if (item.sellerAvatar){
        itemForSale.getElementsByTagName("img")[0].src = item.sellerAvatar.url();
        itemForSale.getElementsByTagName("img")[0].alt = item.sellerUsername;
    }
    

    itemForSale.getElementsByTagName("img")[1].src = item.image;
    itemForSale.getElementsByTagName("img")[1].alt = item.name;
    itemForSale.getElementsByTagName("h1")[0].innerText = item.name;
    itemForSale.getElementsByTagName("p")[0].innerText = item.description;

    itemForSale.getElementsByTagName("button")[0].innerText = `Buy for ${item.askingPrice}`;
    itemForSale.getElementsByTagName("button")[0].onclick = () => buyItem(item);
    itemForSale.id = `item-${item.uid}`;
    itemsForSale.appendChild(itemForSale);
}


getAndRenderItemData = (item, renderFunction) => {
    
    fetch(item.tokenUri)
    .then(response => response.json())
    .then(data => {
        item.name = data.name;
        item.description = data.description;
        item.image = data.image;
        renderFunction(item);
    })
}
#2

Hey @Mateo03

renderItem = (item) => {
    const itemForSale = marketplaceItemTemplate.cloneNode(true);
    if (item.sellerAvatar){
        itemForSale.getElementsByTagName("img")[0].src = item.sellerAvatar.url();
        itemForSale.getElementsByTagName("img")[0].alt = item.sellerUsername;
    }
    

    itemForSale.getElementsByTagName("img")[1].src = item.image;
    itemForSale.getElementsByTagName("img")[1].alt = item.name;
    itemForSale.getElementsByTagName("h1")[0].innerText = item.name;
    itemForSale.getElementsByTagName("p")[0].innerText = item.description;
    itemForSale.getElementsByTagName("p")[1].innerText = item.sellerUsername; //here is an example

    itemForSale.getElementsByTagName("button")[0].innerText = `Buy for ${item.askingPrice}`;
    itemForSale.getElementsByTagName("button")[0].onclick = () => buyItem(item);
    itemForSale.id = `item-${item.uid}`;
    itemsForSale.appendChild(itemForSale);
}
#3

I don’t see a place in your code where you can get undefined because of sellerUsername

#4 
    itemForSale.getElementsByTagName("img")[0].alt = item.sellerUsername;

maybe you don’t have that column in the database table?
what do you see if you put a console.log(item)?

#5

cause its the original not modified. I am asking what should I add

#6

I can see the seller username when printing item

#7

Full HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Morarable</title>
</head>
<body>
    <div>
        <button id="btnConnect">Connect wallet</button>
        <button id="btnUserInfo">Profile</button>
        <button id="btnOpenCreateItem">Create</button>
        <button id="btnMyItems">My items</button>
    </div>

    <div id="userInfo">
        <h4>User Profile</h4>
        <input type="text" id="txtUsername" required placeholder="Enter username">
        <input type="text" id="txtEmail" placeholder="Enter email">
        <small>Optional</small>

        <img width="50" height="50" src="" id="imgAvatar" alt="">
        <label for="fileAvatar">Select Avatar</label>
        <input type="file" id="fileAvatar">

        <button id="btnLogout">Log out</button>
        <button id="btnCloseUserInfo">Close</button>
        <button id="btnSaveUserInfo">Save</button>
    </div>

    <div id="createItem">
        <h4>Create Item</h4>
        <input type="text" id="txtCreateItemName" required placeholder="Enter name">
        <textarea id="txtCreateItemDescription" cols="30" rows="5" placeholder="Enter description"></textarea>
        <input type="number" min="1" step="1" id="numCreateItemPrice" placeholder="Enter price" required>
    
        <label for="selectCreateItemStatus">Status</label>
        <select id="selectCreateItemStatus">        
            <option value="0">Not for sale</option>
            <option value="1">Instant buy</option>
            <option value="2">Accept Offers</option>
        </select>

        <label for="fileCreateItemFile">Select File</label>
        <input type="file" id="fileCreateItemFile">

        <button id="btnCloseCreateItem">Close</button>
        <button id="btnCreateItem">Create!</button>
    </div>

    <div id="userItems">
        <h4>My Items</h4>
        <div id="userItemsList"></div>
        <button id="btnCloseUserItems">Close</button>
    </div>

    <div id="itemsForSale"></div>

    <div id="itemTemplate">
        <img src="" alt="">
        <h5></h5>
        <p></p>
        <p></p>
        <input type="number" min="1" step="1">
        <button>Put for sale</button>
    </div>

    <div id="marketplaceItemTemplate">
        <img src="" alt="">
        <h6></h6>
        <img src="" alt="">
        <h5></h5>
        <p></p>
        <p></p>
        <button></button>
    </div>

    <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="abi.js"></script>
    <script src="main.js"></script>
</body>
</html>

Code part to change:

renderItem = (item) => {
    const itemForSale = marketplaceItemTemplate.cloneNode(true);
    if (item.sellerAvatar){
        itemForSale.getElementsByTagName("img")[0].src = item.sellerAvatar.url();
        itemForSale.getElementsByTagName("img")[0].alt = item.sellerUsername;
    }
    

    itemForSale.getElementsByTagName("img")[1].src = item.image;
    itemForSale.getElementsByTagName("img")[1].alt = item.name;
    itemForSale.getElementsByTagName("h1")[0].innerText = item.name;
    itemForSale.getElementsByTagName("p")[0].innerText = item.description;
    itemForSale.getElementsByTagName("p")[1].innerText = item.sellerUsername; //here is an example

    itemForSale.getElementsByTagName("button")[0].innerText = `Buy for ${item.askingPrice}`;
    itemForSale.getElementsByTagName("button")[0].onclick = () => buyItem(item);
    itemForSale.id = `item-${item.uid}`;
    itemsForSale.appendChild(itemForSale);
}
#8

Many thanks yomoo that worked!
it was a silly mistake jeje

1 Like
#9