Read JSON File into HTML with JavaScript Fetch API

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). I'll help you master the latest tech here:

👉 Discord: all my courses have a private Discord where I actively participate

⏱️ Timestamps:
0:00 - Intro
0:54 - Use fetch()
2:10 - CORS error (solution: Live Server)
3:35 - Get data into HTML by manipulating HTML / DOM

#json #fetchapi #dommanipulation #javascript

[ankitpatil]

I searched the entire internet to solve this problem, but the solution was as simple as turning on live server. Thank You!

[drhstqi]

This is the only video out of 30 watched that helped me solve the problem! Why hasn't anyone talked about a live server before? And everything turned out to be so simple. Thanks a lot to the author!

[DemsterDog]

You've been a big help man, thank you!

[SalientAnimal]

Why would I be getting the error "Uncaught (in promise) TypeError: data.forEach is not a function". My code is exactly as the video, except my data is from a live API link. I'm using FireFox as a Web Browser.

[thierrynoemy]

Thank you! that's exactly I need now👍

[vidyays]

Hey how can I show the api data on screen in a check box. once user selects teh check box it should insert in database

[Bluedragon]

I keep getting this error "TypeError: data.foreach is not a function" can you please help?

<script>
const listEL =

fetch('./messages.json')
.then(res => res.json())
.then(data => {
console.log(data);
/*data = JSON.parse(data);*/
data.foreach(post =>{
listEL.insertAdjacentHTML('beforeend', `<li>${post.sender_name}</li>`);

});
/*listEL.insertAdjacentHTML('beforeend', `<li>test</li>`);*/
});
</script>

[Knards]

I have tried writing form data to a json file, but never was successful. Even using this author's tutorial to do it. Why doesnt anyone teach real world examples like reading and writing to a local json file?

[gappuma]

Do you know if it's a good practice to read directly from a Json file stored on the server or should i put it in a database for security reasons. Or is there a way to store it securely?

[SoIam-ebsf]

Hey what i want is get json data as JS without using copy of json file . What I want is to use API From website and use online web page data on my web page.

[Felipekimst]

hii! do you know why is my res.json() request returning a forever pending status request?? it doesnt reject nor resolve, so the .then and .catch aren't being triggered

[cimmik]

Why does the live server solve the CORS error?

[klaasvanamsterdam]

First, I get only ${post.title} rows, but later i see, must use the template marks there. Thanks!

[juniorpaez]

Hi! i don't speack english, so sorry!
But, i have a qustion
in the next code:

function obtenerEmpleados() {
const archivo = './empleados.json'
fetch(archivo)
.then(resultado => {
console.log(resultado)
})
}
obtenerEmpleados();

i get a status: 404 in the console
i think the const archivo the read like string

i have this json

{
"empleados": [
{
"id": 1,
"nombre": "Steven",
"puesto": "Programador Web"
},
{
"id": 2,
"nombre": "Héctor",
"puesto": "Programador BackEnd"
},
{
"id": 3,
"nombre": "Elizabeth",
"puesto": "Diseñadora"
},
{
"id": 4,
"nombre": "Junior",
"puesto": "Jefe de Área"
}
]
}

Help me, please!