Чтение JSON-файла в HTML с использованием jQuery - PullRequest
0 голосов
/ 03 ноября 2019

Итак, у меня есть программа nodejs, которая записывает данные в файл JSON. Теперь у меня есть другой файл node.js, который просто запускает сервер localhost на: http://localhost:8000/ (который работает), в этом файле я использую fs.readFile для чтения моего файла index.html. До этого момента все работает нормально. Теперь, когда я захожу в свой HTML-файл и импортирую jquery, открываю некоторые теги сценария и пытаюсь получить свой json-файл (ITEM_FILE_LIST.json) с помощью jQuery getJSON, он ничего не делает.

Файл JSON выглядит следующим образом:

[{"fileName":"File1.json"},{"fileName":"File2.json}]

Это мой текущий HTML-файл и файл Node.js, который создает локальный сервер

Все, что мне нужно сделать, это ПРОЧИТАТЬФайл JSON в HTML, мне не нужно ничего писать / добавлять

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" type="text/javascript"></script>
        <style type="text/css">

        </style>
    </head>
    <body>
        <div id="itemContainer">

        </div>
    </body>

    <script type="text/javascript">
        $.getJSON('ITEM_FILE_LIST.json', function(data) {
            console.log(data);
            var output = '<ul>';
            $.each(data, function(key,val) {
               output += '<li>' + val.fileName + '</li>'; 
            });
            output += '</ul>';
            $("#itemContainer").html(output);
        });
    </script>
</html>

============================================================================= // НАЙДИТЕ ФАЙЛ JS ДЛЯ ХОЗЯЙСТВЕННОГО ЛОКАЛЬНОГО СЕРВЕРА

var http = require('http');
var fs = require('fs');
var open = require('open');
var colors = require('colors/safe');

var messageShown = false;

var handleRequest = (request, response) => {
    response.writeHead(200, {
        'Content-Type': 'text/html'
    });
    fs.readFile('index.html', null, function (error, data) {
        if (error) {
            response.writeHead(404);
            respone.write('Whoops! File not found!');
        } else {
            response.write(data);
        }
        response.end();
    });

    if (!messageShown) {
        console.log(colors.green(time() + 'Don\'t close this prompt as long as you want to see the items!'));
        messageShown = true;
    }
};

http.createServer(handleRequest).listen(8000);

(async () => {
     await open('http://localhost:8000/');
})();

function time() {
    var currentTime = '[' + new Date().getHours() + ":" + ((new Date().getMinutes()<10?'0':'') + new Date().getMinutes()) + ":" + ((new Date().getSeconds()<10?'0':'') + new Date().getSeconds()) + '] - ';
    return currentTime;
}

Заранее спасибо

РЕДАКТИРОВАТЬ: Я только что проверил, и кажется, вместо того, чтобы захватить мой файл JSON Ajaxпродолжает получать данные index.html ... Кто-нибудь знает, как это исправить?

1 Ответ

1 голос
/ 03 ноября 2019

На базовом уровне вы можете добавить условия в функцию handleRequest.

if (request.url === "/") {
response.writeHead(200, {
  "Content-Type": "text/html"
});
fs.readFile("index.html", null, function(error, data) {
  if (error) {
    response.writeHead(404);
    respone.write("Whoops! File not found!");
  } else {
    response.write(data);
  }
  response.end();
});
} else if (request.url === "/getjson") {
  response.writeHead(200, {
  "Content-Type": "application/json"
  });
  fs.readFile("ITEM_FILE_LIST.json", null, function(error, data) {
   if (error) {
     response.writeHead(404);
     respone.write("Whoops! File not found!");
   } else {
     response.write(data);
   }
   response.end();
  });
 }

Здесь я также добавил новую конечную точку "/ getjson", которую необходимо добавить в index.html. также при получении json.

$.getJSON('/getjson', function(data) {
        console.log(data);
        var output = '<ul>';
        $.each(data, function(key,val) {
           output += '<li>' + val.fileName + '</li>'; 
        });
        output += '</ul>';
        $("#itemContainer").html(output);
    });

Кроме того, в вашем json отсутствовали двойные кавычки, в конце File2.json

[{"fileName":"File1.json"},{"fileName":"File2.json"}]

Пожалуйста, отметьте

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...