Создание пользовательского интерфейса / запись HTML из файла JSON

У меня есть действительно длинный, громоздкий, неформатированный файл JSON, созданный Lighthouse (инструмент, который проводит анализ времени загрузки страницы, поэтому в этом файле есть результаты тестов). Чтобы сделать его отформатированным для чтения людьми, мне, по-видимому, нужно создать пользовательский интерфейс вокруг этого файла. Моя проблема в том, что я не знаю, как начать над этим работать.

Я читал о чем-то вроде создания HTML из объектов JSON, думаю, я хотел бы попробовать это, чтобы просто отображать всю информацию из тестов в браузере прямо сейчас ... Но где бы я это написал? У меня сейчас есть один файл Node.js, который запускает тесты и использует JSON.stringify() для вставки результатов JSON в файл. Могу ли я сгенерировать HTML сразу после создания JSON? (И главный вопрос - как мне создать HTML из файла JSON?)

Я только начинаю работать с Node и JSON, очень ценю любые советы.


node.js user-interface json html lighthouse
person eragonssword    schedule 25.07.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Да, вы можете создать HTML из файла JSON.

Вот простой пример, сделанный с помощью jQuery, сначала создается массив всех элементов, а затем используется _ 1_, чтобы проанализировать их. После синтаксического анализа их можно просто добавить в любое место DOM:

var json_file = {
  "one": "Hi there",
  "two": "Another item",
  "three": "Third item"
}

var items = [];

$.each(json_file, function(key, val) {
  items.push("<li id='" + key + "'>" + val + "</li>");
});

$("<ul/>", {
  "class": "json-list",
  html: items.join("")
}).appendTo("body");

// Sample extension showcasing manipulation of inserted HTML
$(".json-list #two").css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Очевидно, что чем сложнее ваш JSON (и желаемая структура HTML), тем сложнее будет метод анализа JSON.

Механизм создания шаблонов значительно упростил бы вашу работу, и их сотни. Некоторые из наиболее популярных:

Надеюсь это поможет! :)

person Obsidian Age    schedule 25.07.2017
comment
Мне кажется, что независимо от того, использую ли я шаблонизатор или нет, существует некоторый ручной аспект для форматирования этого HTML / указания, какая информация мне нужна из файла JSON. Этот файл, вероятно, состоит из миллиона строк, и он вообще не отформатирован (это один огромный блок текста в textedit и одна очень длинная строка, когда я открываю его в возвышенном тексте). Я думаю, мне нужно перенести результаты моих тестов в файл, отличный от JSON, и найти другой способ их отображения. - person eragonssword; 26.07.2017
comment
Ну, я сейчас копаюсь в этом чудовищном файле в поисках имен элементов, которые мне нужно отобразить (и я использую Mustache). Я начал с чего-то вроде примера, который вы привели выше, но теперь я переключился на создание и редактирование файла package.json. В частности, я редактирую script, чтобы создать шаблон с помощью команды cli. - person eragonssword; 28.07.2017