Если вы работаете с инструментами, которые помогают другим разработчикам отлаживать приложения, вы можете знать, насколько полезно графически видеть структуру массива или объекта в JavaScript. Обычно это можно сделать на консоли, однако, если вы работаете с инструментом внутри вашего приложения, вы можете положиться на HTML для создания такой структуры. К счастью, уже есть библиотека javascript, написанная на vanilla js, которая может помочь вам представить объект JavaScript в виде разборной древовидной структуры. Мы говорим о renderjson. Render JSON — это плагин, который позволяет отображать объект JavaScript в виде свертываемого и настраиваемого HTML-списка. Эта библиотека призвана быть очень простой, с несколькими опциями и без внешних зависимостей. Он нацелен на отладку, но вы можете использовать его там, где это полезно. Код воспроизводит JSON лениво, создавая HTML только тогда, когда пользователь раскрывает JSON, щелкая значки раскрытия. Это делает чрезвычайно быстрым выполнение начального рендеринга огромных объектов JSON, поскольку единственное, что изначально рендерится, — это один значок раскрытия.
В этой статье мы хотим поделиться с вами полезным плагином для рендеринга объектов JSON / JS в виде разборных древовидных структур в вашем веб-приложении с использованием стандартного JavaScript или jQuery.
1. Включить renderjson
Чтобы использовать renderjson в вашем проекте, просто скачать копию скрипта renderjson или ссылаться на него из бесплатного CDN. Затем включите тег сценария в ваш документ:
И все, переменная renderjson будет автоматически отображаться в окне. Для получения дополнительной информации об этой библиотеке, не забудьте посетить официальный репозиторий Github здесь и домашняя страница здесь.
2. Как использовать
Как объяснялось ранее, переменная renderjson, представленная в окне, представляет собой функцию, которая принимает объект JS, который вы хотите отобразить как один аргумент, и возвращает элемент HTML, не строка
Так что если вы хотите отобразить разборный ванильный JavaScript, вы сможете отрендерить его с помощью:
// The JSObject that you want to render
var data = {
hello: [1,2,3,4],
there: {
a:1,
b:2,
c:["hello", null]
}
};
// Render toggable list in the container element
document.getElementById("container").appendChild(
renderjson(data)
);
Или в качестве альтернативы, если вы предпочитаете jQuery:
<
// The JSObject that you want to render
var data = {
hello: [1,2,3,4],
there: {
a:1,
b:2,
c:["hello", null]
}
};
$("#container").append($(renderjson(data)));
Это сделает список с возможностью переключения без стилей, но полностью функциональный:
Тем не менее, это довольно скучно, не так ли? Хотя вы можете щелкать и переключать элементы в списке, ему нужен цвет. Renderjson не содержит CSS для списка, поэтому вы сами должны определить стили. Мы будем использовать следующие правила для визуализации разборной структуры с цветами и темным фоном:
#container {
text-shadow: none;
background: #303030;
padding: 1em;
}
.renderjson a {
text-decoration: none;
}
.renderjson .disclosure {
color: crimson;
font-size: 150%;
}
.renderjson .syntax {
color: grey;
}
.renderjson .string {
color: red;
}
.renderjson .number {
color: cyan;
}
.renderjson .boolean {
color: plum;
}
.renderjson .key {
color: lightblue;
}
.renderjson .keyword {
color: lightgoldenrodyellow;
}
.renderjson .object.syntax {
color: lightseagreen;
}
.renderjson .array.syntax {
color: lightsalmon;
}Таким образом, вывод структуры будет теперь:
Вы можете проверить это только в следующем скрипте, если хотите:
