Чтение JSON в html

то, что я пытаюсь сделать, должно быть довольно простым, но почему-то у меня это не работает?

поэтому у меня есть следующий файл JSON jsonFile.json:

{
    "level1":"elemet1",
    "level2":"element2",
    "level3":{
        "testing":"element3"
    }
}

И я хочу получить доступ к данным в нем, используя HTML-страницу, подобную этой index.html:

    <!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>

    <title>JSON Example</title>

</head>
<body>

    <div id = "data1">Level 1 value :  </div>    
    <div id = "data2">Level 2 value :  </div> 
    <div id = "data3">Level 3 value :  </div> 





    <script>
        function loadJSON(callback) {   

        var xobj = new XMLHttpRequest();
            xobj.overrideMimeType("application/json");
        xobj.open('GET', 'jsonFile.json', true); // Replace 'my_data' with the path to your file
        xobj.onreadystatechange = function () {
              if (xobj.readyState == 4 && xobj.status == "200") {
                // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
                callback(xobj.responseText);
              }
        };
        xobj.send(null);  
        }

        function init() {

         loadJSON(function(response) {
          // Parse JSON string into object
            var actual_JSON = JSON.parse(response); 

            for (var key in actual_JSON) {
                var innerkey = actual_JSON[key];
                for (var inner in innerkey) {
                     document.getElementById('data1').innerHTML += 'Level 1 value'+innerkey[inner]['level1']+'<br>';
                     document.getElementById('data2').innerHTML += 'Level 2 value: '+innerkey[inner]['level2']+'<br>';
                     document.getElementById('data2').innerHTML += 'Level 3 value: '+innerkey[inner]['level3']+'<br>';
                }   
            }   
         }); 
        }
        init();
        </script>

</body>
</html>

поэтому вызов «index.html» из браузера напрямую приводит к следующей ошибке:

Access to XMLHttpRequest at 'file:///C:/Users/Engine/Documents/JSON_TEST/jsonFile.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, brave, https.
loadJSON @ index.html:31

чтобы решить эту проблему, я сейчас использую node.jsсервер app.js:

    var http = require('http');
var fs =require('fs');


var server = http.createServer(function(req,res){
    console.info('request was made : '+req.url);
    res.writeHead(200,{'Content-Type':'text/html'});
    var myReadStream  = fs.createReadStream(__dirname +'/index.html','utf8');
    myReadStream.pipe(res);
});

server.listen('3000','127.0.0.1');

console.info('listening to 3000');

Итак, теперь вызываем app.js с помощью:

node app.js

и позвонив по адресу: 127.0.0.1:3000

вот ошибка, которую я получаю:

Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)
at (index):38
at XMLHttpRequest.xobj.onreadystatechange ((index):28)

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

javascript html json

29.07.2019 09:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

использовать библиотеку: https://www.npmjs.com/package/load-json-файл

case '/credential': {
            const credential = await loadJsonFile("./credential.json");
            response.end(JSON.stringify(credential, null, 3));
            break;
        }

29.07.2019 10:09

Ответ принят как подходящий

Проблема в том, что вы всегда возвращаете index.html независимо от URL, запрошенного пользователем. Попробуйте открыть http://localhost:3000/jsonFile.json в браузере: вы увидите содержимое HTML-файла, а не ожидаемый json.

Позвольте мне использовать ваш собственный код, чтобы доказать свою точку зрения:

var server = http.createServer(function(req,res){
    console.info('request was made : '+req.url);
    var myReadStream;

    // If the user requests the json file...
    if (req.url.endsWith('jsonFile.json')) {
        // ...get the json file, NOT the index.html
        myReadStream  = fs.createReadStream(__dirname +'/jsonFile.json', 'utf8');
    } else {
        myReadStream  = fs.createReadStream(__dirname +'/index.html', 'utf8');
    }
    res.writeHead(200,{'Content-Type':'text/html'});
    myReadStream.pipe(res);
});

Есть лучшие способы создать этот сервер. Взгляните на http-сервер.

После исправления этого вам нужно будет взглянуть на свой цикл javascript, но переменная actual_JSON будет иметь содержимое файла JSON.

до сих пор не понимаю, как это сделать правильно, но, по крайней мере, сервер теперь работает! Спасибо за вашу помощь!

— 29.07.2019 11:24

29.07.2019 10:23