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

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

[@thierrynoemy8344]

Thank you! that's exactly I need now👍

[@DemsterDog]

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

[@SahilMeo-CodingExpert]

Thanks man! this help me alot.

[@maisserhan]

how can add new object in json

[@umangternate]

How to save the data in a variable?

[@vidyays127]

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

[@vidyays127]

Anybody knows pls help me to do that

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

[@rithikop3203]

The list prints undefined in webpage

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

[@florianmaier9221]

Thank you so much!

[@ayushmaansingh5568]

IT WORKED THANK YOUUUU LOVE YOUUUUU

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

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

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

[@VidhyaShreeK-d8l]

thank you sir

[@hassanhaider8710]

Thank you bossman

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

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

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