Отображение файла JSON в браузере с помощью nodejs
Я создаю сервер localhost и читаю путь к файлу, а затем читаю файл json
Я передаю путь к файлу в url.
Примерно так: http: // локальный: 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.info(jsonData);//just displaying in console
console.info(data);
res.render("./main.ejs", { jsonData: jsonData });
});
});
});
app.use(function(req, res, next) {
next(createError(404));
});
app.listen(PORT, function() {
console.info(`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 и отразить изменения в месте назначения
Я еще не добавил никаких функций к кнопке редактирования.
В любом случае, что вы имеете в виду, отображайте это «правильным» способом ... мы не знаем, каково ваше определение «правильного». Приведите пример желаемого результата. В любом случае, если вы хотите, чтобы его можно было редактировать, вы, вероятно, захотите поместить его в текстовое поле, а затем правильно настроить форму, чтобы она снова отправляла данные обратно на сервер, чтобы вы могли сохранить их обратно на диск.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Пожалуйста, используйте для этого тег <pre>.
<pre>
<%=JSON.stringify(JSON.parse(jsonData)) %>
</pre>
Пример:
<html>
<body>
<h1> Below is the code without pre </h1>
[ { "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" } ]
<h1> Below is the code with pre </h1>
<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"
}
]
</pre>
</body>
</html><%= JSON.stringify(JSON.parse(jsonData)) %> совершенно бессмысленен. Вы анализируете jsonData, которая является строкой, в объект, а затем сразу же снова превращаете его обратно в строку. Вы получаете именно то, что вкладываете.
В любом случае, откуда вы знаете, что это решение? OP сказал, что им не нравится вывод, но не указал, как они хотят, чтобы он выглядел вместо этого. «правильный способ» - это не определение, которое кто-либо может использовать для создания графического интерфейса. Так что, действительно, сейчас на этот вопрос невозможно ответить.
Pre в любом случае работает с форматированием json. Надеюсь, это решит проблему @crazycoder
Конечно, это работает для форматирования JSON в определенном стиле, но на самом деле мы не знаем наверняка, чего хотел OP. Насколько нам известно, возможно, они хотели сделать из этого HTML-таблицу или что-то в этом роде. А потом они начали говорить о его редактировании, так что, возможно, они хотят, чтобы это было в элементе формы, таком как текстовое поле. Совершенно непонятно
Я предполагаю, что вы имеете в виду, что не хотите, чтобы это было "красиво напечатано", что-то вроде
{
"key": "value",
"key2": "value2"
}
вместо 1 длинной очереди ...
В таком случае вы можете:
<code><pre><%=JSON.stringify(JSON.parse(jsonData), null, 2) %></pre></code>
Третий параметр stringify сообщает ему, сколько пробелов использовать в качестве отступа, и он позволяет печатать JSON на нескольких строках вместо одной длинной строки.
Тег <code> обычно имеет стиль по умолчанию моноширинного шрифта, что делает символы более красивыми.
Тег <pre> сообщает браузеру, что содержимое предварительно отформатировано; пробелы и символы новой строки должны быть сохранены.
Также обратите внимание, что вы должны никогда опубликовать приведенный выше код в общедоступном Интернете. Это огромная дыра в безопасности. Вы разрешаете кому угодно читать любой файл с вашего жесткого диска. Об этом написано множество статей, но вот один пример, в котором говорится об этой угрозе безопасности:
спасибо большое, я увижу статью спасибо
<%= JSON.stringify(JSON.parse(jsonData)) %>совершенно бессмысленен. Вы разбираетеjsonData, который является строкой, в объект, а затем сразу же снова превращаете его обратно в строку. Вы получаете именно то, что вставили.<%= jsonData %>даст точно такой же результат без дополнительной обработки.