How to read JSON files into HTML using JavaScript's fetch (no D3, no jQuery, vanilla JS!)

Use JavaScript’s fetch function to read in a JSON file. No external libraries needed!

[binauralfortune]

thanks for this, Jonathan. The fetch function was the straight-forward approach I needed for my simple project. No need to use npm, install frameworks and bloated libraries. I got the js script to grab the text inside my json file and update my html. Success! I got my dopamine hit for the day and now I can pull away from the computer, get some fresh air, walk down to the local Starbucks and celebrate with a "java" chip frappuccino.

[gabrielvindas]

I have literally spent like 3 hours trying to do this. Thank you!!

[rafaelibanhez]

Man.... I been looking for this for a long time. You made my day. Thank you.

[Btechdom]

If you're getting [object Object], just wrap your JSON variable like:

.innerText = JSON.stringify(data);

[chunkbot]

This was super helpful today, for me, and helped me overcome a hurdle in my understanding of how javascript works.

[alireza.tayari]

Loved the way you simplify thinks Jonathan

[richhutnik]

I am having problems here trying to do this for the Cloud Resume Challenge. I want to extract values from a JSON file and manipulate them. I want to at least convert the JSON file into a single string I can parse into another piece of code and I am stuck. I get the JSON object to display in the console, but I cannot get it to work elsewhere. I know about the CORS issue, which I did resolve, but I am still stuck.

[ae]

Was suffering without this video. Thank you so much.

[saas]

I was trying to find something like that whole day and i came across you.Thank you so much mate.

[digitalart]

bruuuhh..! finally i get the right video, i spent more than 4 hours searching thank youu

[ssmishra]

Fetch method is not working for me. I am using node js server. Any solution please

[techz]

Thank you so much, i watched like 10 videos and got the same error. your vid helped me alot

[zahabiyafakhruddinrangwala]

I cannot thank you enough for your video! you are a great savior!

[i_clock]

thanks for this video i was looking for something like this for ages

[santoshsingh]

/// I Have Used this fetch but they will given error // please give some instruction any body
fetch("card.json")
.then(tha=>tha.json)
.then(data3=>{
console.log(data3);
})

[jbvview]

is that working on Live server extension that vscode provides?

(Edited)

Yes

[kolyxix]

Thank you so much. I have spent the whole day looking a solution and I found this. God bless you

[shailjasharma]

how do we catch the data so that we can use it later in the code, ie. outside of fetch, I tried something like .then(Data => json_obj = Data)

but as soon as we get out of the fetch function it no longer recognises json_obj

[shubhamshrivastav]

now this is what I was looking for...thanx a lot man...u just earned a subscriber 👍👍👍

[lorenzosandini]

Very nice, thank you.

What about arrays ? If the content of my sample-file.json is the following, and I need to retrieve the "notes" and "created_at" key values ?


[
{
"enteredBy": "Boss",
"eventType": "Announcement",
"notes": "glargine 14",
"created_at": "2021-03-23T19:00:25.889Z",
},
{

"created_at": "2021-03-23T17:27:29.472Z",
"eventType": "Meal Bolus",
"carbs": 40,
"insulin": null
}
]