Отобразить строку Json в HTML с правильным отступом

0

Моя сторона сервера вернет строку JSON, и мне нужно будет отобразить ее на моей странице Html. Итак, скажем, строка выглядит примерно так:

{"FirstChildType":{"FirstGrandChild":{"GrandChildName":"123"},"FirstChildName":"a"},"SecondChildType":{"SecondChildName":"SecondChildABC","SecondChildLastName":"SecondChildXYZ"},"ThirdChildType":null,"FirstName":"ABC","LastName":"XYZ"}

Как я могу показать это в своем Html с хорошим отступлением? Я попробовал "google-code-prettify", но так или иначе не мог заставить это работать так, как хотелось.

  • 0
    Любое требование? Использовать только JavaScript Можно ли использовать PHP?
  • 0
    Да, могу. Javascript или любая клиентская библиотека. Я хочу отобразить что-то вроде подсветки синтаксиса, но с правильным отступом.
Теги:
indentation

2 ответа

0
Лучший ответ

Эта страница здесь хорошо отвечает с JSON.stringfy. Смотрите это в JS Fiddle

            function syntaxHighlight(json) {
                if (typeof json != 'string') {
                     json = JSON.stringify(json, undefined, 2);
                }
                json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
                    var cls = 'number';
                    if (/^"/.test(match)) {
                        if (/:$/.test(match)) {
                            cls = 'key';
                        } else {
                            cls = 'string';
                        }
                    } else if (/true|false/.test(match)) {
                        cls = 'boolean';
                    } else if (/null/.test(match)) {
                        cls = 'null';
                    }
                    return '<span class="' + cls + '">' + match + '</span>';
                });
            }
0

Вы можете использовать JSON.stringify для его форматирования:

var jsParsed = {"FirstChildType":{"FirstGrandChild":{"GrandChildName":"123"},"FirstChildName":"a"},"SecondChildType":{"SecondChildName":"SecondChildABC","SecondChildLastName":"SecondChildXYZ"},"ThirdChildType":null,"FirstName":"ABC","LastName":"XYZ"};        
var indented = JSON.stringify(g,null,4);

Ещё вопросы

Сообщество Overcoder
Наверх
Меню