Показать JSON как HTML

Любые рекомендации по встраиванию JSON на HTML-странице с JSON, отформатированным в стиле, удобочитаемом человеком? Например, когда вы просматриваете XML в браузере, большинство браузеров отображают форматированные XML (отступы, правильные разрывы строк и т.д.). Я хотел бы получить тот же конечный результат для JSON.

Выделение синтаксиса цвета будет бонусом.

Спасибо

Ответ 1

Вы можете использовать функцию JSON.stringify с неформатированным JSON. Он выводит его форматированным способом.

JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)

Это превращает

{ "foo": "sample", "bar": "sample" }

 {
     "foo": "sample", 
     "bar": "sample" 
 }

Теперь данные являются читаемым форматом, который вы можете использовать Google Code Prettify script, как было предложено @A. Положите цвет на него.

Стоит добавить, что IE7 и старые браузеры не поддерживают метод JSON.stringify.

Ответ 2

Если вы намеренно показываете его для конечного пользователя, оберните текст JSON в теги <PRE> и <CODE>, например:

<html>
<body>
<pre>
<code>
[
    {
        color: "red",
        value: "#f00"
    },
    {
        color: "green",
        value: "#0f0"
    },
    {
        color: "blue",
        value: "#00f"
    },
    {
        color: "cyan",
        value: "#0ff"
    },
    {
        color: "magenta",
        value: "#f0f"
    },
    {
        color: "yellow",
        value: "#ff0"
    },
    {
        color: "black",
        value: "#000"
    }
]

</code>
</pre>
</body>
</html>

В противном случае я бы использовал JSON Viewer.

Ответ 3

Для подсветки синтаксиса используйте код prettify. Я считаю, что это то, что StackOverflow использует для выделения кода.

Оберните свой форматированный JSON в кодовых блоках и дайте им класс "prettyprint".
Включите prettify.js на странице.
Убедитесь, что тег тела документа вызывает prettyPrint(), когда он загружает

У вас будет синтаксис, выделенный JSON в формате, который вы разместили на своей странице. См. здесь для примера. Поэтому, если у вас есть блок кода следующим образом:

<code class="prettyprint">
    var jsonObj = {
        "height" : 6.2,
        "width" : 7.3,
        "length" : 9.1,
        "color" : {
            "r" : 255,
            "g" : 200,
            "b" : 10
        }
    }
</code>

Это будет выглядеть так:

var jsonObj = {
    "height" : 6.2,
    "width" : 7.3,
    "length" : 9.1,
    "color" : {
        "r" : 255,
        "g" : 200,
        "b" : 10
    }
}

Это не помогает с отступом, но другие ответы, похоже, обращаются к этому.

Ответ 4

Я думаю, вы имели в виду нечто подобное: Визуализация JSON

Не знаю, можете ли вы его использовать, но вы можете спросить автора.

Ответ 5

что-то вроде этого???

довольно-JSON

https://github.com/warfares/pretty-json

живой образец:

http://warfares.github.com/pretty-json/

Ответ 6

Здесь легкое решение, выполняющее только то, что задает ОП, включая подсветку, но не более того: Как я могу печатать JSON с помощью JavaScript?

Ответ 7

Можно использовать JSON2HTML, чтобы преобразовать его в хорошо отформатированный HTML-список.. может быть немного более мощным, чем вам действительно нужно, но

http://json2html.com

Ответ 8

SyntaxHighlighter - полнофункциональный автономный синтаксис синтаксиса кода, разработанный в JavaScript. Чтобы понять, что способен SyntaxHighlighter, просмотрите страницу demo.

Ответ 9

Если вы просто хотите сделать это с точки отладки, вы можете использовать плагин Firefox, например JSONovich, чтобы просмотреть JSON содержание.

Новая версия Firefox, которая в настоящее время находится в бета-версии, предназначена для поддержки этой поддержки (подобно XML)

Ответ 10

Здесь инструмент javasript, который преобразует JSON в XML и наоборот, что должно повысить его читаемость. Затем вы можете создать таблицу стилей, чтобы покрасить ее или сделать полное преобразование в HTML.

http://www.xml.com/pub/a/2006/05/31/converting-between-xml-and-json.html

Ответ 11

Лучше всего использовать ваши языковые инструменты для этого. На каком языке вы используете? Для Ruby попробуйте json_printer.

Ответ 12

Сначала возьмите строку JSON и внесите реальные объекты из нее. Петля, несмотря на все свойства объекта, помещая предметы в неупорядоченный список. Каждый раз, когда вы переходите к новому объекту, создавайте новый список.