Питання Як я можу надрукувати JSON, використовуючи JavaScript?


Як я можу відображати JSON у форматі, зручному для читання (для читачів)? Я шукаю, перш за все, для відступу та пробілу, причому, можливо, навіть кольори / стилі шрифтів / тощо.


1666
2018-01-26 22:33


походження


Можливі дублікати Як я можу прикрасити JSON програмним шляхом? - hippietrail
@hippietrail meta.stackoverflow.com/q/251938/3853934 - Michał Perłakowski
Якщо ви просто виводите на html, ви можете загорнути його в a <pre> тег - Ryan Walker


Відповіді:


Прекрасний друк виконано спочатку в JSON.stringify(). Третій аргумент дозволяє досить друкувати і встановлює інтервал використання:

var str = JSON.stringify(obj, null, 2); // spacing level = 2

Якщо вам потрібно підкреслити підсвічування синтаксису, ви можете використати магію регулярних виразів так:

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>';
    });
}

Дивіться в дії тут: jsfiddle

Або повний фрагмент наданий нижче:

function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function syntaxHighlight(json) {
    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>';
    });
}

var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]};
var str = JSON.stringify(obj, undefined, 4);

output(str);
output(syntaxHighlight(str));
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }


3709
2017-08-28 10:56



Супер чудово. Я додав функцію, щоб відкрити це в новому вікні для налагодження: var json = syntaxHighlight (JSON.stringify (obj, undefined, 4);); var w = window.open (); var html = "<head> <style> pre (outline: 1px solid #ccc; padding: 5px; margin: 5px;} .string {color: green;}"; html + = ".number (color: darkorange;) .boolean {color: blue;} .null {color: magenta;} .key {color: red;} </ style> </ head> <body>"; html + = "<pre>" + json + "</ pre>"; w.document.writeln (html); - JayCrossler
Приємно Не забувайте про необхідність CSS і a <pre>, правда. - NoBugs
чомусь, коли я сповіщаю про це, воно дійсно відображає відформатований, однак все-таки показує плоский рядок, коли я плюю його до div через jQuery: $ ("# transactionResponse"). show (). html (prettifyObject (data), null, '\ t'); де prettifyObject - це метод, який я створив, що містить ваші перші два рядки вище. - PositiveGuy
@ CoffeeAddict Переконайтеся, що ваш #transactionResponse елемент має white-space: pre; як стиль CSS. - user123444555621
Зауважте, що stringify(...) працює на JSON об'єкти, а не на рядках JSON. Якщо у вас є рядок, вам потрібно JSON.parse(...) перший - Vihung


Користувач Pumbaa80 відповідає чудово, якщо у вас є об'єкт ти хочеш досить надрукований. Якщо ви починаєте з дійсного JSON рядок що ви хочете досить надруковані, вам потрібно спочатку перетворити його на об'єкт:

var jsonString = '{"some":"json"}';
var jsonPretty = JSON.stringify(JSON.parse(jsonString),null,2);  

Це створює об'єкт JSON з рядка, а потім перетворює його назад у рядок, використовуючи гарний друк JSON stringify.


181
2018-06-21 20:35



Це попрацювало для мене, але кинуло помилку, використовуючи JSON.parse тому я змінив це бути JSON.stringify(jsonString, null, 2). Залежить від вашого JSON / Object. - Jazzy
Зверніть увагу, що при відображенні рядка потрібно скріпити його <pre></pre> мітки - Undistraction
@Jazzy JSON.parse тільки помирає, якщо у вас є недійсна JSON-адреса або вона вже перетворена на об'єкт ... переконайтеся, що ви знаєте, з яким типом даних ви маєте справу, перш ніж намагатись JSON.parse - Kolob Canyon
@Unitraction Ваш коментар був корисним для мене, я перевірятимуть необхідність перевірити, що саме pre робить - Dhaval Jardosh
@Jazzy Якщо вам довелося це зробити, у вас не було рядка JSON, у вас був звичайний об'єкт. JSON є завжди рядок Це просто зображення на основі рядка об'єкта Javascript. - Clonkex


Грунтуючись на відповідь Pumbaa80, я змінив код, щоб використовувати кольори консолі.log (напевно працювати над Chrome), а не HTML. Вихід можна побачити всередині консолі. Ви можете редагувати _варіанти всередині функції, додаючи ще кілька стилів.

function JSONstringify(json) {
    if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, '\t');
    }

    var 
        arr = [],
        _string = 'color:green',
        _number = 'color:darkorange',
        _boolean = 'color:blue',
        _null = 'color:magenta',
        _key = 'color:red';

    json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var style = _number;
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                style = _key;
            } else {
                style = _string;
            }
        } else if (/true|false/.test(match)) {
            style = _boolean;
        } else if (/null/.test(match)) {
            style = _null;
        }
        arr.push(style);
        arr.push('');
        return '%c' + match + '%c';
    });

    arr.unshift(json);

    console.log.apply(console, arr);
}

Ось букмарклет, який ви можете використовувати:

javascript:function JSONstringify(json) {if (typeof json != 'string') {json = JSON.stringify(json, undefined, '\t');}var arr = [],_string = 'color:green',_number = 'color:darkorange',_boolean = 'color:blue',_null = 'color:magenta',_key = 'color:red';json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {var style = _number;if (/^"/.test(match)) {if (/:$/.test(match)) {style = _key;} else {style = _string;}} else if (/true|false/.test(match)) {style = _boolean;} else if (/null/.test(match)) {style = _null;}arr.push(style);arr.push('');return '%c' + match + '%c';});arr.unshift(json);console.log.apply(console, arr);};void(0);

Використання:

var obj = {a:1, 'b':'foo', c:[false,null, {d:{e:1.3e5}}]};
JSONstringify(obj);

Редагувати: я просто намагався вийти з символу% з цим рядком після декларації змінних:

json = json.replace(/%/g, '%%');

Але я дізнаюсь, що Chrome не підтримує% вибій у консолі. Дивно ... Можливо, це буде працювати в майбутньому.

Ура!

enter image description here


23
2018-01-29 13:16



Я використав ur-код, але я отримую вихід у форматі json, але я не отримую колір, а також в останньому я отримую кольоровий тег, це вивід {"error": {"code": 0, "message": "O"}}, колір: червоний, колір: червоний, колір: темно-червоний - ramesh027
+1, щоб запропонувати використовувати як букмарклет! Дякую - Renato Gama


Я використовую Розширення JSONView Chrome (це так красиво, як воно потрапляє :):

Редагування: додано jsonreport.js

Я також випустив інтернет-автономний JSON досить переглядач друку, jsonreport.js, який забезпечує людський зчитуваний HTML5 звіт, який ви можете використовувати для перегляду будь-яких даних JSON.

Ви можете дізнатись більше про формат в Новий формат звіту HTML5 HTML5.


20
2018-01-26 22:37



Мені потрібна бібліотека Javascript * .js, яка могла б досить друкувати рядок JSON, додавши елементи та класи класу. Щось подібне var results = prettyPrint ('{"key": "value"}'); - Mark
Це чудово, тому що його легко додати. Ви навіть можете змінити настройки кольору <3 - Luca Steeb


Ви можете використовувати console.dir(), що є ярликом для console.log(util.inspect()). (Різниця лише в тому, що вона обходить будь-який звичай inspect() функція, визначена на об'єкті.)

Він використовує підсвічування синтаксису, розумні відступи, видаляє котирування з ключів і просто робить вихід як гарний, як він отримує.

const object = JSON.parse(jsonString)

console.dir(object, {depth: null, colors: true})

і для командного рядка:

cat package.json | node -e "process.stdin.pipe(new stream.Writable({write: chunk => console.dir(JSON.parse(chunk), {depth: null, colors: true})}))"


16
2017-11-14 09:46



Будь-який спосіб отримати його, щоб він почав розширюватися? - Daniel Sokolowski
Що ви маєте на увазі @ Даніель Соколовський? - adius
в Інструментах розробника Chrome я повинен натиснути маленький трикутник, щоб отримати ключі для об'єктів, будь-який спосіб його автоматичного розширення? snag.gy/7wPqsl.jpg - Daniel Sokolowski
Мн. Гарне питання. Я не знаю одного, але це було б корисно, дійсно ... - adius


Кращий спосіб.

Очистити JSON масив у Javascript

JSON.stringify(jsonobj,null,'\t')

11
2017-10-21 10:19



Краще за що і як? - Dan Dascalescu
@DanDascalescu Краще, ніж все перераховане вище? - adamj


var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07",  "postalCode": "75007", "countryCode": "FRA",  "countryLabel": "France" };

document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);

У випадку відображення в HTML, вам слід додати балісе <pre></pre>

document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"

Приклад:

var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07",  "postalCode": "75007", "countryCode": "FRA",  "countryLabel": "France" };

document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);

document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"
div { float:left; clear:both; margin: 1em 0; }
<div id="result-before"></div>
<div id="result-after"></div>


7
2018-03-01 15:42





Для цілей налагодження я використовую:

console.debug ("% o", дані);

5
2018-01-10 14:11



-1; це еквівалентно простому виконанню console.debug(data); в (принаймні) Chrome і Firefox. Він не показує представлення JSON data, не говорячи вже про гарний друк. - Mark Amery
@MarkAmery 2 роки тому ця функція була нова для браузера і працювала тільки, як я описав. Якщо ти занадто молодий - я радий тобі! Також синтаксис, як console.debug("%s: %o x %d", str, data, cnt); може бути корисним для когось. - gavenkoa
Подивіться також console.dir що дозволяє здійснювати навігацію даними. - Christophe Roussy