Отображение файла JSON в браузере с помощью nodejs - PullRequest
0 голосов
/ 31 октября 2018

Я создаю локальный сервер и читаю путь к файлу, а затем читаю файл json

Я передаю путь к файлу в URL.
Как то так: http://localhost:3000/C:/Users/Desktop/generated.json

серверный код

var createError = require("http-errors");
var express = require("express");
var path = require("path");
var PORT = 3000;
var fs = require("fs");
var app = express();
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

const url = require("url");
app.use(function(req, res) {
  let k = req.originalUrl;
  file = k.slice(1);


  fs.exists(file, function(exists) {
    fs.readFile(file, "utf-8", (error, data) => {
      if (error) throw error;
      let jsonData = [];
      jsonData.push(data);
      console.log(jsonData);//just displaying in console
      console.log(data);
      res.render("./main.ejs", { jsonData: jsonData });
    });
  });
});

app.use(function(req, res, next) {
  next(createError(404));
});

app.listen(PORT, function() {
  console.log(`app is listening at port ${PORT}`);
});

это код на стороне клиента с использованием ejs

<!DOCTYPE html>
<html>

<head contentType="application/JSON">


</head>

<body>
    <form>
            <h1>
            <%=JSON.stringify(JSON.parse(jsonData)) %>
        </h1>
            <br />
        <button name="Click to edit" type="submit" style="height:100px ;width:200px ;font-size:20px">
            Click to edit
        </button>
    </form>
</body>

</body>

</html>

Выводится что-то вроде этого: ссылка на вывод, как это показано

Так что я не могу отобразить его должным образом.
Любая идея, как я могу это сделать?

Даже если я хочу внести изменения в файл json и отразить изменения в месте назначения

Я еще не добавил никаких функций к кнопке редактирования.

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Я собираюсь догадаться, что вы имеете в виду, что вы не хотите, чтобы это было "довольно напечатано", что-то вроде

{
  "key": "value",
  "key2": "value2"
}

вместо 1 длинной строки ...

Если это так, то вы можете сделать:

<code><code><pre><%=JSON.stringify(JSON.parse(jsonData), null, 2) %>

Третий параметр stringify сообщает ему, сколько пробелов использовать в качестве отступа, и он будет достаточно печатать JSON на несколько строк вместо 1 длинной строки.

В теге <code> обычно используется стиль по умолчанию для моноширинного шрифта, что делает расположение символов лучше.

Тег <pre> сообщает браузеру, что содержимое предварительно отформатировано; пробелы и символы новой строки должны быть сохранены.


Кроме того, обратите внимание, что вы никогда не должны раскрывать вышеуказанный код в общедоступном Интернете. Это огромная дыра в безопасности. Вы разрешаете кому-либо читать любой файл с вашего жесткого диска. Есть множество статей по этому поводу, но вот один пример, который говорит об этой угрозе безопасности:

https://blog.rapid7.com/2016/07/29/pentesting-in-the-real-world-local-file-inclusion-with-windows-server-files/

0 голосов
/ 31 октября 2018

Пожалуйста, используйте для этого тег <pre>.

<code><pre>
    <%=JSON.stringify(JSON.parse(jsonData)) %>

Пример:




   Below is the code without pre 
  [ { "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem
  sunt rem eveniet architecto" }, { "userId": 1, "id": 2, "title": "qui est esse", "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui
  aperiam non debitis possimus qui neque nisi nulla" } ]

   Below is the code with pre 
  
     [
      {
        "userId": 1,
        "id": 1,
        "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
      },
      {
        "userId": 1,
        "id": 2,
        "title": "qui est esse",
        "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
      }
     ]
     
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...