Read JSON File into HTML with JavaScript Fetch API

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ธ.ค. 2024

ความคิดเห็น • 42

  • @ankitpatil8568
    @ankitpatil8568 ปีที่แล้ว +8

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

  • @НадеждаГришко-т8ъ
    @НадеждаГришко-т8ъ ปีที่แล้ว +9

    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
      @Z3r0_B7i55 ปีที่แล้ว

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

    • @НадеждаГришко-т8ъ
      @НадеждаГришко-т8ъ ปีที่แล้ว

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

  • @DemsterDog
    @DemsterDog 6 หลายเดือนก่อน +1

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

  • @SahilMeo-v6b
    @SahilMeo-v6b 21 วันที่ผ่านมา +1

    Thanks man! this help me alot.

  • @ByteGrad
    @ByteGrad  2 ปีที่แล้ว

    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

  • @thierrynoemy8344
    @thierrynoemy8344 11 หลายเดือนก่อน +1

    Thank you! that's exactly I need now👍

  • @SalientAnimal
    @SalientAnimal 10 หลายเดือนก่อน +1

    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
      @MaxNadeev 10 หลายเดือนก่อน

      Same problem

    • @162sujiths4
      @162sujiths4 6 หลายเดือนก่อน

      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.

  • @maisserhan
    @maisserhan 3 หลายเดือนก่อน

    how can add new object in json

  • @ayushmaansingh5568
    @ayushmaansingh5568 11 หลายเดือนก่อน

    IT WORKED THANK YOUUUU LOVE YOUUUUU

  • @vidyays127
    @vidyays127 4 หลายเดือนก่อน

    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
      @vidyays127 4 หลายเดือนก่อน

      Anybody knows pls help me to do that

  • @umangternate
    @umangternate ปีที่แล้ว +1

    How to save the data in a variable?

  • @01Bluedragon
    @01Bluedragon 4 หลายเดือนก่อน

    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
      @kubadrard6495 3 หลายเดือนก่อน

      Same problem

    • @PaintingAndPolitics
      @PaintingAndPolitics หลายเดือนก่อน

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

  • @gappuma7883
    @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?

  • @Felipekimst
    @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
      @ByteGrad  ปีที่แล้ว +1

      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
      @Felipekimst ปีที่แล้ว +1

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

  • @rithikop3203
    @rithikop3203 ปีที่แล้ว +1

    The list prints undefined in webpage

  • @cimmik
    @cimmik 2 ปีที่แล้ว

    Why does the live server solve the CORS error?

    • @ByteGrad
      @ByteGrad  2 ปีที่แล้ว

      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
      @cimmik 2 ปีที่แล้ว +1

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

  • @PranavIngale-z2b
    @PranavIngale-z2b ปีที่แล้ว

    i am getting values as undefined

  • @florianmaier9221
    @florianmaier9221 2 ปีที่แล้ว +1

    Thank you so much!

  • @hassanhaider8710
    @hassanhaider8710 11 หลายเดือนก่อน

    Thank you bossman

  • @SoIam-eb4sf
    @SoIam-eb4sf 2 ปีที่แล้ว

    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.

  • @Knards
    @Knards 4 หลายเดือนก่อน

    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?

  • @VidhyaShreeK-d8l
    @VidhyaShreeK-d8l ปีที่แล้ว +1

    thank you sir

  • @klaasvanamsterdam3061
    @klaasvanamsterdam3061 ปีที่แล้ว

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

    • @ByteGrad
      @ByteGrad  ปีที่แล้ว +1

      Are you using backticks instead of quotation marks?

    • @klaasvanamsterdam3061
      @klaasvanamsterdam3061 ปีที่แล้ว +1

      @@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
    @juniorpaez2654 2 ปีที่แล้ว

    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
      @ByteGrad  2 ปีที่แล้ว

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

    • @juniorpaez2654
      @juniorpaez2654 2 ปีที่แล้ว

      @@ByteGrad No, I have in the same folder

    • @ByteGrad
      @ByteGrad  2 ปีที่แล้ว +1

      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
    @ramandamytv1193 ปีที่แล้ว +1

    thank you very much!