Визуализировать произвольный JSON в HTML
6903 просмотра
4 ответа
Я пишу страницу просмотра данных для визуализации объектов, отправляемых в виде JSON с сервера. Объекты JSON различаются по содержанию и сложности: от плоских объектов с несколькими атрибутами и до более крупных структур с несколькими слоями вложенности и массивами. Что я хотел бы сделать, это сделать простое представление объекта, вероятно, как ул. Оттуда я могу добавить материал, позволяющий кликабельно развернуть / свернуть поведение или что-то еще
Я знаю, что для этого потребуется рекурсивная функция, которую я могу вызвать на верхнем уровне, которая затем будет вызываться снова для каждого обнаруженного уровня вложенности. Я просто не очень уверен в Javascript, и я не очень далеко с этим. У меня также возникают проблемы с тем, что я не знаю имен атрибутов - разные объекты будут иметь разные атрибуты с разными именами.
Есть ли относительно простой способ рендеринга такого объекта или мне придется изменить форму JSON, который отправляет сервер?
РЕДАКТИРОВАТЬ: образцы JSON, вероятно, не очень поможет; они сильно различаются. Как я уже сказал, некоторые из них простые, а некоторые очень сложные. Самые простые объекты - что-то вроде этого:
{
"id": "5",
"category": "12",
"created": "25-Sep-2012"
}
в то время как самый сложный у меня в настоящее время что-то вроде этого:
{
"Attempted":"EditUser",
"Exception":{
"Message":"Something",
"TargetSite":"somewhere",
"Inner Exception":{
"Message":"Something else",
"TargetSite":"somewhere.core",
"Inner Exception":{
"Message":"Another message",
"TargetSite":"something.core.subr",
"Inner Exception":{
"Message":"Object reference not set to an instance of an object.",
"TargetSite":"System.Web.Mvc.ActionResult Update(Int32, System.String, System.String)",
"StackTrace":[
"at Application.Controllers.AdminController.Update(Int32 id, String email, String password) in c:\\Docs\\Apps\\Main\\MyBranch\\Source\\Application\\Application\\Controllers\\AdminController.cs:line 123"
],
"Inner Exception":{
}
}
}
}
},
"details":{
"userEmail":"test@email.com",
"userId":"25",
"userRole":"User"
}
}
Как видите, это JSON-представление журнала ошибок, в том числе исключения, выдаваемого программным обеспечением (конфиденциальные детали скрыты). Объекты JSON генерируются из поля «detail» журнала аудита, поэтому в будущем могут регистрироваться другие события, чьи данные находятся в другом формате, чем то, что я предсказываю сейчас, поэтому я пытаюсь обработать произвольный JSON без опора на знание формата.
Автор: anaximander Источник Размещён: 13.11.2019 11:41Ответы (4)
10 плюса
Вы можете использовать что-то вроде алгоритма BFS. Вот быстрый пример (зависит от jQuery):
CSS
ul {
margin-left: 1em;
}
.json-key {
font-weight: bold;
}
HTML
<div id="json-viewer"></div>
Javascript
function visitObj($container, obj) {
var $ul = $('<ul>');
for (var prop in obj) {
var $li = $('<li>');
$li.append('<span class="json-key">' + prop + ': </span>');
if (typeof obj[prop] === "object") {
visitObj($li, obj[prop]);
} else {
$li.append('<span class="json-value">'+obj[prop]+'</span>');
}
$ul.append($li);
}
$container.append($ul);
}
Так называем это на вашем примере:
visitObj($('#json-viewer'), {
"Attempted":"EditUser",
"Exception":{
"Message":"Something",
"TargetSite":"somewhere",
"Inner Exception":{
"Message":"Something else",
"TargetSite":"somewhere.core",
"Inner Exception":{
"Message":"Another message",
"TargetSite":"something.core.subr",
"Inner Exception":{
"Message":"Object reference not set to an instance of an object.",
"TargetSite":"System.Web.Mvc.ActionResult Update(Int32, System.String, System.String)",
"StackTrace":[
"at Application.Controllers.AdminController.Update(Int32 id, String email, String password) in c:\\Docs\\Apps\\Main\\MyBranch\\Source\\Application\\Application\\Controllers\\AdminController.cs:line 123"
],
"Inner Exception":{
}
}
}
}
},
"details":{
"userEmail":"test@email.com",
"userId":"25",
"userRole":"User"
}
});
Для рабочего примера посмотрите эту скрипку .
Автор: surjikal Размещён: 12.11.2012 10:272 плюса
Говоря о моем собственном роге, вы, вероятно, могли бы адаптировать JSON2HTML к вашим потребностям. Источник находится по адресу https://github.com/bloopletech/json2html - см. Scripts / parse.js для ядра, которое анализирует JSON и генерирует HTML.
Автор: bloopletech Размещён: 12.11.2012 10:141 плюс
Вы можете использовать уже существующие библиотеки, которые автоматически выполняют рендеринг и преобразование JSON в HTML. Но если вы хотите делать более персонализированные вещи после чтения / рендеринга JSON, вы вполне можете положиться на старый добрый JavaScript (в конце концов, все библиотеки .js написаны с использованием простого старого JS)
По сути, вам нужно визуализировать JSON и извлечь из него данные. Когда у вас есть данные, которые вы хотите, вы можете преобразовать их в любой формат, который вы хотите. Вам нужно выполнить проверку типа объекта и, если это тип данных примитива, извлечь данные, а если нет, выполнить рекурсивный вызов, пока не найдете тип данных примитива.
Фрагмент кода для этого:
function renderJson(jsonObject){
for(var objType in jsonObject){
if(typeof jsonObject[objType] === 'object'){
renderJson(jsonObject[objType]);
}
else{
alert(' name=' + objType + ' value=' + jsonObject[objType]);
}
}
}
Это очень простой фрагмент кода. Вы можете изменить этот фрагмент в соответствии с вашими потребностями.
Обратитесь к http://www.json.org/js.html за дополнительной информацией о том, как вы можете поиграться с объектами и массивами JSON, используя JS.
Автор: Yash Размещён: 12.11.2012 11:091 плюс
Посмотрите исходный код для visualizer.json2html.com, так как он в значительной степени визуализирует любой json, который вы к нему добавляете.
Вот скриншот того, что визуализатор смог сделать с вашим примером json выше ... снова код уже готов и готов к выбору :)
Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- javascript Скрипт входа со скрытыми кнопками
- javascript Как автоматически изменить размер текстовой области с помощью Prototype?
- html Определить часовой пояс пользователя
- html Как мне дать моим веб-сайтам значок для iPhone?
- html Как отключить автозаполнение браузера в поле веб-формы / теге ввода?
- html Как вы можете настроить номера в упорядоченном списке?
- json Безопасное превращение строки JSON в объект
- json Как я могу "красиво" отформатировать вывод JSON в Ruby on Rails?
- json Сериализация JSON в jQuery
- json Можете ли вы использовать запятую в JSON-объекте?
- json Можно ли использовать комментарии в формате JSON?
- json Могу ли я подавать RSS в формате JSON?