How to fetch JSON data into HTML?
JSON file is called data.json and has "day" and "amount" data that I want to put into
class="day-name" and class="daily-amount" elements.
Jyou can import your javascript using :
And then import your JSON in javascript:
and then go from there
And then import your JSON in javascript:
and then go from there
Jyou'll have to loop over
data
DI did that it is just that it is not working
DI will send you my JS code
DDwhoops
DI did something like this
Dand few other versions
Dnone worked
Jmake a codepen, then I can take a look
JI don't see anything immediately wrong with that atm
DSec
DLet me figure out how to do it
D
DDoes it work?
DWait forgot the JSON
DxD
DBut don't know how to do it
Jyeah, I didn't quite think about the json... what's the contents of the json file? can you paste it here?
DSure!
D[
{
"day": "mon",
"amount": 50.45
},
{
"day": "tue",
"amount": 100.91
},
{
"day": "wed",
"amount": 52.36
},
{
"day": "thu",
"amount": 31.07
},
{
"day": "fri",
"amount": 23.39
},
{
"day": "sat",
"amount": 43.28
},
{
"day": "sun",
"amount": 25.48
}
]
{
"day": "mon",
"amount": 50.45
},
{
"day": "tue",
"amount": 100.91
},
{
"day": "wed",
"amount": 52.36
},
{
"day": "thu",
"amount": 31.07
},
{
"day": "fri",
"amount": 23.39
},
{
"day": "sat",
"amount": 43.28
},
{
"day": "sun",
"amount": 25.48
}
]
JI've set it up in a codesandbox, you can add more files in there. I see the logic flaw now, you're fetching once, and then assigning stuff to it, but you're assigning to the nodelist / array, not to a specific element in the array
DI did put them through
Dfor loop
Dbut it was still the same
DI'm still confused. Usually it would work with chartDailyAmount[i].innerHTML
Jthat wasn't in the code you shared though, and the [i] wouldn't be available in a for...of
DI made another for loop inside of it
DKinda stupid, but I thought it would still work
DDo you maybe have a proper for loop?
DTHat would work?
Jis there a reason you pre-fill the data in the HTML?
DI was just practicing HTML/CSS and basic JS, did not plan on doing anything with JSON. However it really does not look like something hard to execute.
DMaybe it is?
J
MAnd instead of prefilling the html. you could do this
DNice! Thanks for the help!
DYeah saw people do it that way instead but was just wondering if it could be done even with pre-written HTML. Either way thanks for help as well!
JI wouldn't necessarily recommend my solution btw, it's very dependent on the order the data appears in and the data having the same number of records as the pre-populated HTML, which isn't generally something you should rely on. It's just the closest to what you had that works, Mark's solution is more robust and easier to work with / reason about
D@jochemm Now I have the problem of data showing when I inspect the elements in browser, but not showing in console when I request them with console.log on page load.
It is a graph where it will be shown depending on data, now its just an empty graph. xD Will have to try different methods tomorrow
It is a graph where it will be shown depending on data, now its just an empty graph. xD Will have to try different methods tomorrow