Hi i want to take the image from the json file and put it into my html table. right now it gives me the error: GET c:fakepathFULLSCALE.jpeg net::ERR_UNKNOWN_URL_SCHEME. i want to show the image beside the pris. look at the image attached to see how it looks nowhtml page
Please help me, it’s an exam project
this is my code:
varer.js
document.addEventListener("DOMContentLoaded", (event) => {
document.getElementById("form").addEventListener("submit", (event) => {
event.preventDefault();
const varer = document.getElementById("varer").value;
const pris = document.getElementById("pris").value;
const billede = document.getElementById("billede").value
const opretVare = {
varer: varer,
pris: pris,
billede: billede
};
fetch("http://localhost:8200/varer/createvarer", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(opretVare),
})
//converter det til Json
.then((response) => response.json())
.catch(() => {
window.alert("Der skete en fejl");
});
});
});
async function getGoods() {
const response = await fetch("http://localhost:8200/varer/getproducts")
const result = await response.json()
return result
}
async function deleteGoods(id) {
const response = await fetch("http://localhost:8200/varer/delete" + id, {
method: 'DELETE'
})
const result = await response.json()
return result
}
function renderTable(goods) {
const table = document.getElementById('varerTable');
let tableHtml = `
<tr>
<th>Varekategori</th>
<th>Pris</th>
<th>Billede</th>
</tr>`;
for (const row of goods){
tableHtml += `
<tr>
<td>${row.varer}</td>
<td>${row.pris}</td>
<td><img src="${row.billede}" style="height:100px;width000px;"</td>
<td><button onclick = "handleDelete"(${row.id})"> Delete </button></td>
<td><button onclick ="toDo"> Edit </button></td>
</tr>
`;
}
table.innerHTML = tableHtml;
}
async function handleDelete(id) {
try {
await deleteGoods(id)
const goods = await getGoods()
renderTable(goods)
} catch(err) {
console.error(err)
}
}
async function handleLoad() {
try {
const goods = await getGoods()
renderTable(goods)
} catch(err) {
console.error(err)
}
}
document.getElementById("clickMe").addEventListener('click', handleLoad);
//vis alle varene på siden
router.get("/getproducts", (req, res) =>{
res.status(200).json(products)
console.log(products)
})
varer.json
[{"varer":"mælk","pris":"10","billede":"C:\fakepath\FULLSCALE.jpeg"}]