Question

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

Answer 1

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:27

Answer 2

2 плюса

Говоря о моем собственном роге, вы, вероятно, могли бы адаптировать JSON2HTML к вашим потребностям. Источник находится по адресу https://github.com/bloopletech/json2html - см. Scripts / parse.js для ядра, которое анализирует JSON и генерирует HTML.

Автор: bloopletech Размещён: 12.11.2012 10:14

Answer 3

1 плюс

Вы можете использовать уже существующие библиотеки, которые автоматически выполняют рендеринг и преобразование 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:09

Answer 4

1 плюс

Посмотрите исходный код для visualizer.json2html.com, так как он в значительной степени визуализирует любой json, который вы к нему добавляете.

Вот скриншот того, что визуализатор смог сделать с вашим примером json выше ... снова код уже готов и готов к выбору :)

введите описание изображения здесь

Автор: Chad Brown Размещён: 28.12.2012 05:28

Визуализировать произвольный JSON в HTML

Ответы (4)

Вопросы из категории :