Відобразити JSON як HTML [закрито]

178

Зачинено. Це питання поза темою . Наразі відповіді не приймаються.

Хочете вдосконалити це питання? Оновіть питання, щоб воно було тематичним для переповнення стека.

Закрито 7 років тому .

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

Підсвічування синтаксису кольору було б бонусом.

Дякую

html json

— Джон Мухов
джерело

tohtml.com/javaProperties добре працював для мене; це робить стиль «інлайнером»; дуже корисно для простого копіювання та вставки в щось інше.

— Ендрю Баклін

Ознайомтесь з моєю бібліотекою azimi.me/json-formatter-js

— Mohsen

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), ви отримаєте приємні розриви рядків

— Джонатан

5

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

— BlaShadow

1

Я застосував це з великим ефектом для випадку використання, коли JSON, відформатований людиною, повинен був відображатися в HTML <textarea> елемент. Здавалося, що це робиться просто чудово.

— CSSian

1

Поставте це в <pre. і ви налаштовані, принаймні, для налагодження, коли не можете використовувати 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. спасибі.

— Марк Сенеделла

1

Не знаю, як це не має більше коштів. Просте, легке рішення.

— anthv123

9

@ geowa4, JSON.stringify(jsonObj, null, ' ')прикрасить його з 2 пробілами. Я знаю, що це пізно, але думав, що ця порада буде корисною.

— hIpPy

2

firefox попереджає: Сайт наперед може містити шкідливі програми, коли ви переходите на

— codeplex.com

65

Для виділення синтаксису використовуйте код pretify . Я вважаю, що саме це 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 заморожені, ми повинні вказувати нових користувачів безпосередньо на нове

— репортаж

Як можна змусити це працювати в межах повернення AJAX? Код відсутній при навантаженні тіла, але лише після виклику Ajax.

— toddmo

@toddmo, ви повинні мати можливість виконувати мої 3 кроки у функції обробника відповідей для повернення AJAX. Тож обробник викличе доситьPrint замість методу body onLoad. Я очікую, що це має спрацювати.

— А. Леві

Відповідь Януса Троельсена впала і просто працювала, тому я пішов з цим. Ви повинні перевірити це на PHP-> HTML, так просто.

— toddmo

40

Я думаю, ви мали на увазі щось подібне: JSON Visualization

Не знаєте, чи можете ви використовувати його, але ви можете запитати автора.

— Пітер Ерхольм
джерело

Нереально! Чудово! Я не знаю, що сказати ... велике спасибі

— fdrv

Дійсно приємний інструмент!

— David Lilljegren

29

щось на зразок цього ??

гарненький json

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

зразок живого:

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

— війни
джерело

5

Ось легке рішення, виконуючи лише те, що просив ОП, включаючи виділення, але нічого іншого: як я можу симпатично друкувати 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, перегляньте демонстраційну сторінку.

— теміхай
джерело

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 .

— рфундук
джерело

-2

Спочатку візьміть рядок JSON і зробіть з нього реальні об’єкти . Цикл, хоча всі властивості об'єкта, розміщуючи елементи в не упорядкованому списку. Кожен раз, коли ви потрапляєте до нового об’єкта, складайте новий список.

— geowa4
джерело