Here is what I want my fetch api to do:
Make a get request to get json data
Have a foreach loop to turn that json data into items that get put in a grid
Here is my html code:
{{> navbar }}
<link rel="stylesheet" href="./public/css/earn.css">
<link rel="stylesheet" href="./public/css/testing.css">
<div class="content-box">
<div class="content_wrapper">
<div style="text-align: center;" class="content" data-simplebar>
<div class="itemcontainer" style="background-color: #1c1c1c; width:50%; border-radius: 10px;">
</div>
</div>
</div>
</div>
{{> modal }}
{{> footer }}
{{> socketio }}
Here is my js code:
<script>
fetch('/api/PublicInventory').then(data=>{
return data.json();
}).then(response=>{
console.log(response)
response.forEach(element => {
var list = document.getElementsByClassName("itemcontainer");
var item = document.createElement("item");
var fullname = element.market_hash_name.split('|');
var firstpart = fullname[0];
var secondpart = fullname[1];
var imagesrc = element.icon_url;
var itemprice = element.price/100;
item.innerHTML = `
<div class="item">
<div class="item-title">${firstpart}<br>${secondpart}</div>
<img src="${imagesrc}" alt="">
<div class="cost">$${itemprice}</div>
</div>`
list.appendChild(item);
})
})
</script>
The error I am getting is: TypeError: list.appendChild is