How to read data from local json file in javascript?

Question

i am new to javascript and am not sure how to read data from json file using javascript.

i have data like below in my json file located in path api/data.json

{
    "description": " description",
    "data": [
        {
            "id": "1",
            "title": "first_data_title",
            "items": [
                {
                    "id": 1,
                    "title": "item1_title"
                },
                {
                    "id": 2,
                    "title": "item2_title",
                },
                {
                    "id": 3,
                    "title": "item3_title",
                }
            ]
        },
        {
            "id": "2",
            "title": "second_data_title",
            "items": [
                {
                    "id": 4,
                    "title": "item4_title"
                }
                {
                    "id": 5,
                    "title": "item5_title"
                }
            ]
        },
        {
            "id": "3",
            "title": "third_data_title",
            "items": [
                {
                    "id": 6,
                    "title": "item6_title",
                },
            ]
        }
    ]
}

as seen from above data is an array of objects where each data has array of items.

now i want to display each data with its title and its items title in a list. meaning like below,

[![enter image description here][1]][1]

on loading the application

my code is like below,

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="src/styles.css">
        <script src="src/scripts.js"></script>
    </head>
    <body>
        <h2>page loaded</h2>
    </body>
</html>

in scripts.js

function onload() {
    console.log('onload');
    //how to fetch data from data.json file and display it as in the 
    //picture
}

window.onload = onload;

could someone help me with this. thanks.

EDIT:

tried like below

i am trying something like this

function onload() {
    console.log('onload');
    fetch('api/data.json')
        .then(response => {
            if (!response.ok) {
                throw new Error("HTTP error " + response.status);
            }
            return response.json();
        })
        .then(json => {
            const data = json;
            console.log(data);
        })

    }

this gives unexpected token error. i think the problem is using .then

so i tried using async method

async function onload() {
    const data = await fetch('api/data.json');
    console.log('data', data);
}

this gives the regeneratorRuntime not defined error.

i have tried to do like below

functio onload() {
  fetch('api/data.json)
   .then((response) => { 
       console.log('res', response.json);
       return response.json(); 
   })  


}

and this logs error and log statement in console like below

below is how the files are structured and i am trying to just read json data from data.json file located in api folder.

Define "local". Is it "Local to the user running the browser" or "On the same website"? There are many duplicates for both. — Quentin, Oct 12 '20 at 11:25
instead of fetching data from server i am having this data available in the project code already. — stackoverflow_user, Oct 12 '20 at 11:33
How do you expect visitors to the website to load the "project code"? It needs to be hosted on a web server! — Quentin, Oct 12 '20 at 11:34
i am still learning...what i am trying to do now is, i have the json data defined in a seperate file named data.json and i want to read data from that file in scripts.js — stackoverflow_user, Oct 12 '20 at 11:40
i have edited the question but still shows duplicate. and i am unable to ask another question as i have reached my limit of asking questions. — stackoverflow_user, Oct 12 '20 at 12:17
whoever has marked my question as duplicate and closed with a link to an answer doesnt answer my question. — stackoverflow_user, Oct 12 '20 at 12:19
The duplicate does answer the question. It tells you how to fetch the data from the JSON URL. (If it doesn't answer the question then the question is too broad and needs to be more focused). — Quentin, Oct 12 '20 at 12:27
i was trying to use fetch with then but it gives me regeneratorRunTime is not defined. — stackoverflow_user, Oct 12 '20 at 12:41
yes local server. i have added to my question what i have tried. thanks — stackoverflow_user, Oct 12 '20 at 12:48
fetch('./myjson.json') .then((response) => { return response.json(); }) .then((myjson) => { console.log(myjson); }) .catch(err => { console.log(err); }); — javascript lover, Oct 12 '20 at 12:54
but still i get that error. i have attached the screen shot of the error in the question — stackoverflow_user, Oct 12 '20 at 13:00
If the token in position 0 is a `<` then the URL doesn't point to JSON (and likely points to some HTML because HTML documents tend to start with a `<`) — Quentin, Oct 12 '20 at 13:06
i have added the file structure within my project folder to my question and i am trying to read data from data.json file. so is it correct to fetch data like in my code? — stackoverflow_user, Oct 12 '20 at 13:09
Use the debugging tools in your browser. Look at the network tab. Look at the URL being requested for the JSON. Check that you are getting a 200 OK response with the right data. — Quentin, Oct 12 '20 at 13:19
it looks like fetching with correct url as mentioned with status 200. but the response returned is index.html file. i dont understand whats wrong here — stackoverflow_user, Oct 12 '20 at 13:25
'../api/data.json' and also remove onload method simply try fetch and then — javascript lover, Oct 12 '20 at 13:27
We don't know why your webserver is configured to return index.html for that URL. You haven't shown us its configuration … or told us what it is. (And it's getting way off-topic for this question anyway). — Quentin, Oct 12 '20 at 13:44

How to read data from local json file in javascript?

0 Answers0