Показать JSON как HTML [закрыто]

178

Закрыто. Этот вопрос не по теме . В настоящее время он не принимает ответы.

Хотите улучшить этот вопрос? Обновите вопрос, чтобы он соответствовал теме переполнения стека.

Закрыто 7 лет назад .

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

Цветовая подсветка синтаксиса будет бонусом.

Спасибо

html json

— Джон Мухов
источник

tohtml.com/javaProperties работал хорошо для меня; делает стиль «встроенным»; очень полезно для простого копирования и вставки во что-то другое.

— Эндрю Баклин

Проверьте мою библиотеку azimi.me/json-formatter-js

— Мохсен

147

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

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

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

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

в

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

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

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

— Джон
источник

4

Для браузеров, которые не поддерживают JSON.stringify (давайте просто выйдем и скажем это, старый IE), есть отличный полифил, который вы можете использовать для получения функциональности ( json.org/js.html ). Просто включите это, и вы будете покрыты почти везде.

— Джон Мунш

1

Другой трюк в том, что если вместо поля отступа поставить 4 <br>, вы получите хорошие разрывы строк

— Джонатан

5

лучший ответ, делай работу и не нужно включать стороннюю библиотеку.

— BlaShadow

1

Я использовал это с большим эффектом для случая использования, когда JSON в формате человека должен был отображаться в элементе HTML <textarea>. Казалось, делать работу просто замечательно.

— CSSian

1

Поместите это в <пред. и вы настроены, по крайней мере, для целей отладки, когда вы не можете использовать console.log ()

— sparklos

94

Если вы намеренно отображаете его для конечного пользователя, оберните текст 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 .

— RedFilter
источник

10

а что если строка все в одной строке? как он так красиво отформатировал?

— geowa4

2

Ты жжешь. Это самый простой ответ на очень сложный вопрос - как правильно напечатать Python JSON в HTML. Спасибо.

— Марк Cenedella

1

Не знаю, как это не имеет больше голосов. Простое, простое решение.

— anthv123

9

@ geowa4, украсит JSON.stringify(jsonObj, null, ' ')его двумя пробелами. Я знаю, что уже поздно, но подумал, что этот совет будет полезен.

— HIPPY

2

Firefox предупреждает: при входе на codeplex.com на сайте, который находится впереди, могут содержаться вредоносные программы

— JRichardsz

65

Для подсветки синтаксиса используйте код 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
    }
}

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

— А. Леви
источник

1

Теперь, когда все репозитории Google Code заморожены, мы должны указать новым пользователям непосредственно на новое репозиторий GitHub: https://github.com/google/code-prettify

— adelriosantiago

Как вы можете заставить это работать в рамках возврата AJAX? Код загружается не при загрузке тела, а только после вызова ajax.

— toddmo

@toddmo вы должны быть в состоянии выполнить мои 3 шага в функции обработчика ответа для возврата AJAX. Поэтому обработчик будет вызывать prettyPrint вместо метода onLoad тела. Я ожидаю, что должно работать.

— А. Леви

Ответ Януса Троелсена пришелся и просто сработал, так что я пошел с этим. Вы должны проверить это для PHP-> HTML, так просто.

— toddmo

40

Я думаю, что вы имели в виду что-то вроде этого: JSON Visualization

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

— Питер Орнехольм
источник

Нереально! Большой! Я не знаю, что сказать ... большое спасибо

— fdrv

Действительно хороший инструмент!

— Дэвид Лилльгегрен

29

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

довольно-JSON

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

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

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

— warfares
источник

5

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

— Янус Троелсен
источник

превосходная функция, и не только для меня, если все, что вы хотите сделать, это PHP -> HTML, и вот почему: он очень легкий, намного проще, чем Google, меньше и не требует доверия мега-компании , Вы можете посмотреть на код и понять его.

— toddmo

3

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

http://json2html.com

— Чад
источник

1

извините, похоже, что сайт плагинов jquery ушел пока-пока .. попробуйте json2html.com

— Чад Браун,

попробуйте мой: github.com/viscocent/JSON2HTML для более простых проблем

— Viscocent

решил, что я обновлю это с помощью инструмента визуализатора visualizer.json2html.com

— Чед Браун

1

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

— themihai
источник

0

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

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

— AvatarKava
источник

0

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

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

— Уэйн Хартман
источник

0

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

— rfunduk
источник

-2

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

— geowa4
источник