Как отображать необработанные данные JSON на странице HTML

Возможный дубликат:
JSON довольно печатает с использованием JavaScript

Я хотел бы отображать свои сырые данные JSON на HTML-странице, как это делает JSONview. Например, мои сырые данные json:

  {
   "hey":"guy",
   "anumber":243,
   "anobject":{
      "whoa":"nuts",
      "anarray":[
         1,
         2,
         "thr<h1>ee"
      ],
      "more":"stuff"
   },
   "awesome":true,
   "bogus":false,
   "meaning":null,
   "japanese":"明日がある。",
   "link":"http://jsonview.com",
   "notLink":"http://jsonview.com is great"
}

Он исходит из http://jsonview.com/, и то, что я хочу достичь, похоже на http://jsonview.com/example.json, если вы используете Chrome и установили плагин JSONView.

Я пробовал, но не понял, как это работает. Я хотел бы использовать JS script (CSS для выделения) для пользовательского форматирования моих сырых данных JSON, которые извлекаются ajax и, наконец, помещают их на HTML-страницу в любой позиции, например, в элемент div. Существуют ли существующие JS-библиотеки, которые могут это сделать? Или как это сделать?

Ответ 1

Я думаю, что вам нужно отображать данные на странице HTML JSON.stringify.

Например, если ваш JSON хранится следующим образом:

var jsonVar = {
        text: "example",
        number: 1
    };

Тогда вам нужно только сделать это, чтобы преобразовать его в строку:

var jsonStr = JSON.stringify(jsonVar);

И затем вы можете напрямую вставить свой HTML-код, например:

document.body.innerHTML = jsonStr;

Конечно, вы, вероятно, захотите заменить body на другой элемент через getElementById.

Что касается части CSS вашего вопроса, вы можете использовать RegExp для управления строковым объектом перед тем, как поместить его в DOM. Например, этот код (также в JSFiddle для демонстрационных целей) должен позаботиться о вдавливании фигурных скобок.

var jsonVar = {
        text: "example",
        number: 1,
        obj: {
            "more text": "another example"
        },
        obj2: {
             "yet more text": "yet another example"
        }
    }, // THE RAW OBJECT
    jsonStr = JSON.stringify(jsonVar),  // THE OBJECT STRINGIFIED
    regeStr = '', // A EMPTY STRING TO EVENTUALLY HOLD THE FORMATTED STRINGIFIED OBJECT
    f = {
            brace: 0
        }; // AN OBJECT FOR TRACKING INCREMENTS/DECREMENTS,
           // IN PARTICULAR CURLY BRACES (OTHER PROPERTIES COULD BE ADDED)

regeStr = jsonStr.replace(/({|}[,]*|[^{}:]+:[^{}:,]*[,{]*)/g, function (m, p1) {
var rtnFn = function() {
        return '<div style="text-indent: ' + (f['brace'] * 20) + 'px;">' + p1 + '</div>';
    },
    rtnStr = 0;
    if (p1.lastIndexOf('{') === (p1.length - 1)) {
        rtnStr = rtnFn();
        f['brace'] += 1;
    } else if (p1.indexOf('}') === 0) {
         f['brace'] -= 1;
        rtnStr = rtnFn();
    } else {
        rtnStr = rtnFn();
    }
    return rtnStr;
});

document.body.innerHTML += regeStr; // appends the result to the body of the HTML document

Этот код просто ищет разделы объекта внутри строки и разделяет их на div (хотя вы можете изменить часть HTML). Однако каждый раз, когда он сталкивается с фигурной скобкой, он увеличивает или уменьшает отступ в зависимости от того, является ли это открывающей скобкой или закрытием (поведение, аналогичное пространственному аргументу 'JSON.stringify'). Но вы могли бы это за основу для разных типов форматирования.

Ответ 2

Обратите внимание, что ссылка, которую вы указали, не является HTML-страницей, а скорее документом JSON. Форматирование выполняется браузером.

Вы должны решить, если:

Вы хотите показать необработанную JSON (а не HTML-страницу), как в вашем примере
Показать HTML-страницу с форматированным JSON

Если вы хотите 1. просто скажите своему приложению, чтобы отобразить тело ответа с помощью JSON, установите тип MIME (application/json) и т.д. В этом случае форматирование обрабатывается браузером (и/или плагинами браузера).

Если 2., это вопрос рендеринга простой минимальной HTML-страницы с JSON, где вы можете выделить ее несколькими способами:

на стороне сервера, в зависимости от вашего стека. Существуют решения почти для каждого языка.
на стороне клиента с библиотеками выделения Javascript.

Если вы расскажете больше о своем стеке, проще предоставить примеры или ресурсы.

EDIT: для выделения JS на стороне клиента вы можете попробовать higlight.js, например.

Ответ 3

JSON в любом теге HTML, кроме тега <script>, будет простым текстом. Таким образом, как вы добавляете историю на свою HTML-страницу.

Однако, о форматировании, это другое дело. Я думаю, вы должны изменить название своего вопроса.

Взгляните на этот вопрос. Также смотрите эту страницу.