Как извлечь данные json из локальной папки с помощью javascript?

#javascript

Вопрос:

я хочу извлечь данные json из файла в локальной папке с помощью javascript.

у меня есть данные json, как показано ниже, определенные в папке api/data.json

 {
    "title": "title",
    "lists": [
        {
            "id": 1,
            "title": "title1",
            "items": [
                {
                    "id": 1,
                    "title": "item_title_1",
                },
                {
                    "id": 2,
                    "title": "item_title_2",
                },
             ],
         },
         {
            "id": 2,
            "title": "title2",
            "items": [
                {
                    "id": 2,
                    "title": "item_title_2",
                },
                {
                    "id": 3,
                    "title": "item_title_3",
                },
             ],
         }
     ]
 }

я хочу получить эти данные при загрузке приложения, поэтому я вызываю метод fetchData при загрузке в теге body следующим образом

index.html

 <body onload="fetchData()">
    <script src="main.js"></script>
</body>

в main.js файл определил fetchData следующим образом

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

но это выдает ошибку fetchData() не определено. не уверен, в чем проблема. я новичок в javascript и изучаю его. может ли кто-нибудь помочь мне с этим. Спасибо.

Редактировать

на основе ответов, которые я попробовал ниже

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

        <h2>here i am </h2>
    </body>
</html>

в scripts.js файл, который находится в папке src, я определил метод fetchData

 function fetchData() {
    console.log('data');  
}

но все равно дает мне fetchData undefined.

1. Переместите <script > тег внутри head части вашего HTML, чтобы он загружался раньше <body> .

2. @trincot: я пробовал то же самое, что и упоминалось, но все то же самое.

3. Проверьте консоль сетевых транзакций: загрузился ли скрипт?

Ответ №1:

включить main.js перед <body> тегом вы загружаете функцию после ее вызова

Ответ №2:

Попробуйте это

 <html>
<head>
<script src="main.js"></script>
</head>
<body onload="fetchData()">
    
</body>
</html>

1. я пробовал, как уже упоминалось, и я все еще получаю ошибку. я отредактировал свой вопрос в соответствии с тем, что я пробовал.

2. Вы уверены, что main.js нагрузки?

3. Попробуйте добавить файл JS непосредственно на страницу, как это : <html> <head> <script> function fetchData() { console.log(‘data’); } </script> </head> <body onload=»fetchData()»> </body> </html>

Ответ №3:

 <html>
<head>
<script src="main.js"> </script>
</head>

<body onload="fetchData()">
</body>
</html>

И если данные json не выводятся на консоль. Затем запустите index.html на локальном хостинге.

И вам не нужно включать его в index.html использовать javascript. Вы можете использовать ‘node js’ для запуска файлов js без использования браузера. Это намного проще в node, чем связывание файла сценария в html