Issue
I'm trying to utilize a code snippet that I found here on Stack Overflow posted 9 years ago by Sahan0710 as an answer to another user and I just can't get the data to display. Even after scouring the alternative solutions for possible missing details.
This is exactly what I need, so if anyone can enlighten me as to what's wrong or missing or whatever, I would greatly appreciate it. I'm braced to find it's something ridiculously simple.
<BODY>
<H2>Groceries</H2>
<TABLE ID = "tb1" BORDER = "1">
<TR>
<TH>Item</TH>
<TH>Qty</TH>
<TH>UoM</TH>
</TR>
</TABLE>
<SCRIPT type="text/javascript">
fetch("groceries.json")
.then(response => response.json())
.then(data => {
for (var i = 0; i < data.items.length; i++){
let vitem = data.records[i].item;
let vqty = data.records[i].qty;
let vuom = data.records[i].uom;
document.querySelector("#tb1").innerHTML += `
<tr>
<td>${vitem}</td>
<td>${vqty}</td>
<td>${vuom}</td>
</tr>`;
}
})
</SCRIPT>
json file: groceries.json
{
"records" : [
{
"ck" : "",
"item" : "Cheddar Cheese",
"qty" : "1",
"uom" : "lbs",
"notes" : "Sharp"
},
{
"ck" : "",
"item" : "Hamburger",
"qty" : "1",
"uom" : "Pk",
"notes" : "80/20"
},
{
"ck" : "x",
"item" : "Milk",
"qty" : "3",
"uom" : "Gal",
"notes" : ""
},
{
"ck" : "",
"item" : "Orange Juice",
"qty" : "2",
"uom" : "",
"notes" : ""
}
]
}
Solution
I think you can change fetch("groceries.json") to fetch("./groceries.json") so it will default to the folder that both the HTML file is in and the JSON file. Either this or you have it in the wrong directory
Answered By - Owen Odroski
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.