Read JSON File into HTML with JavaScript Fetch API

[@ankitpatil8568]

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

[@НадеждаГришко-т8ъ]

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!

[@Z3r0_B7i55]

How much do you get paid to write fake replies? Just curious...

[@НадеждаГришко-т8ъ]

@@Z3r0_B7i55 If I got paid for commenting it would be nice

[@ByteGrad]

Hi, mastering JavaScript is critical if you want to be a modern, professional developer: www.udemy.com/course/professional-javascript-course/?referralCode=0C1D5752923168BC87C2
Also, if you are a front-end developer then mastering CSS (including Flexbox, CSS Grid, etc.) is equally important: www.udemy.com/course/professional-css/?referralCode=4C3C08E82629E6B15752

[@DemsterDog]

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

[@thierrynoemy8344]

Thank you! that's exactly I need now👍

[@ayushmaansingh5568]

IT WORKED THANK YOUUUU LOVE YOUUUUU

[@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.

[@MaxNadeev]

Same problem

[@162sujiths4]

If the data item is in the form of HTML Collection then it displays this error. Convert the HTML collection to Array by using Array.from() method then apply forEach method.

[@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?

[@maisserhan]

how can add new object in json

[@gappuma7883]

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?

[@danielogbonna6393]

Put it in a database

[@hassanhaider8710]

Thank you bossman

[@umangternate]

How to save the data in a variable?

[@SoIam-eb4sf]

no....... 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.

[@vidyays6161]

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

[@vidyays6161]

Anybody knows pls help me to do that

[@rithikop3203]

The list prints undefined in webpage

[@florianmaier9221]

Thank you so much!

[@01Bluedragon]

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

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

[@kubadrard6495]

Same problem

[@PaintingAndPolitics]

data.forEach - you have to capitalize the E for Each

[@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

[@ByteGrad]

Hi, sorry I don’t have the time to give you a good answer. I highly recommend going through my Professional JavaScript course - these things will become easy to solve

[@Felipekimst]

@@ByteGradthanks for replying, bro! I managed to fix the problem, turns out the json file had a syntax error but for some reason I don't know, it didn't throw an error lol but everything is okay now haha

[@VidhyaShreeK-d8l]

thank you sir

[@PranavIngale-z2b]

i am getting values as undefined

[@cimmik]

Why does the live server solve the CORS error?

[@ByteGrad]

I think you just need any server to serve the JSON-file. In local development here we create one with the Live-Server extension. Probably because it can be insecure to allow local files to be fetched, so you need to explicitly serve it from a server. That's why the error mentions it supports and schemes but not file://.

[@cimmik]

@@ByteGrad Interesting and thanks for the response. I'm tinkering on how I can automate some of my tasks at my workplace by making a web app to read a JSON file instead of manually working in large excel sheets. My workplace's file system is connected to a cloud. I don't know if there's an API available that could give my app access to the file system

[@klaasvanamsterdam3061]

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

[@ByteGrad]

Are you using backticks instead of quotation marks?

[@klaasvanamsterdam3061]

@@ByteGrad Yes, I used the wrong marks. It wasn't until I found out about a "template" insert that I understood as a beginner what I was doing wrong. Thanks again for all the tutorials.

[@juniorpaez2654]

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!

[@ByteGrad]

Hi, 404 means it can’t find that file. Is that file in another folder?

[@juniorpaez2654]

@@ByteGrad No, I have in the same folder

[@ByteGrad]

You could try writing the exact same as me in the video (including semicolons), make sure it works and then change it with your own JSON data

[@ramandamytv1193]

thank you very much!