How Get JSON data to HTML page?

Hi there!
I am working on my first JSON page, a simple FAQ page (Question & Answer). I have been watching Tutorials on Youtube on how to import data to an HTML page, but getting confused …

Could you please explain how to do this? I m not looking for a solution but I want to learn.

Have a look at code:

JSON:

[
    {
        "title": "how to eat healthy?",
        "answer": "Do no eat junk food!"
    },

    {
        "title": "how to relax?",
        "answer": "Go to grab a coffee"
    }
]

HTML

<div class="faq--container">

        <section class="faq--01">
            <h1></h1>
            <p></p>
        </section>

        <section class="faq--02">
            <h1></h1>
            <p></p>
        </section>

    </div>

Thank you for the help.
P.

you can fetch the json file if it’s external to your app.

you can also use an import statement if it’s part of the files of your app

and then you need to parse and map it and create the html with the DOM api

Hi Ilenia,
thanks for the prompt answer.

The file (JSON) is external, so I should use “fetch” - Could you please a tutorial on where to learn step-by-step? …or any online resource you think will help me.

Thank you
P.

if you google you can find plenty of tutorials on the fetch api

[EDITED, more stuff, so you can test and do you need]
Hi Plee,

I think you want this, BUT if you are trying locally, you see in console CORS errors and this will never work.

Live example here, you can see on the console the json is loading.
https://guillermousk.com/freecodecamp/json-page-example/
image

More info here:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <script src="faq.json" type="application/json"></script>
    <!-- Uncoment the line below if you use a file JS and comment ore delete the tag <script>And the code</script> in the body -->
    <!-- <script src="./main.js"></script> -->
    <title>FAQ</title>
</head>

<body>
    <!-- START JS: This code can go in a main.js file located in the same folder, calling in the head <script src="./main.js"></script> -->
    <script>
        //Event on ready DOM
        document.addEventListener("DOMContentLoaded", function () {
            //Fetch data
            fetch('./faq.json')
                .then((response) => response.json())
                .then((json) => {
                    //Then json info is here
                    console.log(json);

                    //You can play here doing a loop and using de iterator "i" for make it at one.
                  //Example: document.querySelector(".faq--0" + i + "h1").innerHTML = json[0].title;
                    //Example: document.querySelector(".faq--0" + i + " p").innerHTML = json[0].answer;
                    document.querySelector(".faq--01 h1").innerHTML = json[0].title;
                    document.querySelector(".faq--01 p").innerHTML = json[0].answer;
                })
        });
    </script>
    <!-- END JS-->

    <!-- START Content HTML -->
    <div class="faq--container">

        <section class="faq--01">
            <h1></h1>
            <p></p>
        </section>

        <section class="faq--02">
            <h1></h1>
            <p></p>
        </section>

    </div>
    <!-- END Content HTML -->
</body>

</html>

I hope this helps

1 Like

Thank you so much! That’s what I was looking for. I have been google it but and I wasn’t able to code by my self. I am now study the code in order to understand line by line the logic.

Thanks for the help. I did it :slight_smile:

If you want to improve and try more things with this, I recommend you to look at this, to understand what I have used.
<==========================================>
<==========================================>

Events (Why used document.addEventListener(“DOMContentLoaded”, function () {)
This event, waits first to DOM content loaded and then do something.
You can check more events, there are a lot of them. (“click” for example).

<==========================================>
<==========================================>

Selectors (Why used document.querySelector)

<==========================================>
<==========================================>

Set/Modify HTML content (Why used .innerHTML)

<==========================================>
<==========================================>

Objects (Why used json[0].title/ json[0].answer)

NOTE: Your Json file has this structure:

[ {"key": "values", "key": "values"},...............]
[] // => Array object ==> Every item array has a position 0 to the end of array, in this case, the first one is [0] position.
{} //=> Object ==> Access data with selecting keys (title and answer)

Happy coding!