Comment peux j’imprimer JSON à l’aide de JavaScript ?

Question

Comment puis-je afficher JSON dans un format facile à lire (pour les lecteurs humains) ? Je suis à la recherche principalement pour la mise en retrait et les espaces, avec peut-être même des couleurs / les styles de police / etc.

Answer 1

Natif de JSON, il n'y a pas besoin d'utiliser une bibliothèque, puisque l'impression est appliquée de manière native.

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

Voir le MDN Docs pour plus de détails (par exemple, sur le deuxième argument);

Si vous avez besoin de la syntaxe, vous pouvez utiliser une regex magie de la sorte:

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

Voir en en action ici (jsfiddle)

ou plein ciselée fourni ici :

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

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&').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; }

Answer 2

Réponse de l’utilisateur Pumbaa80 est très bien si vous avez un objet que vous voulez joli imprimé. Si vous avez une chaîne JSON valide que vous souhaitez joli imprimé, vous pouvez modifier sa réponse avec :

Cela génère un objet JSON de la chaîne, et puis convertit ce retour à une chaîne à l’aide de JSON stringify de jolie impression.

Answer 3

Basé sur Pumbaa80 de réponse, j'ai modifié le code pour utiliser la console.journal des couleurs (travail sur Chrome pour sûr) et pas en HTML. La sortie peut être vu à l'intérieur de la console. Vous pouvez modifier le _variables l'intérieur de la fonction ajouter un peu plus de style.

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

Voici un bookmarklet que vous pouvez utiliser:

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

Utilisation:

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

Edit: j'ai juste essayé de s'échapper le symbole % avec cette ligne, après la déclaration des variables:

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

Mais je trouve que Chrome n'est pas en soutenant % s'échapper dans la console. Étrange... Peut-être que cela va fonctionner dans l'avenir.

Cheers!

Answer 4

J'utilise le JSONView extension Chrome (c'est aussi joli qu'il obtient :):

Edit: ajout d' jsonreport.js

J'ai également lancé une ligne autonome JSON jolie impression de la visionneuse, jsonreport.js qui, lisible par l'homme HTML5 rapport que vous pouvez utiliser pour afficher toutes les données JSON.

Vous pouvez en savoir plus sur le format en JavaScript HTML5 Format de Rapport.

Answer 5

Pour le débogage but j’utilise :

 Console.Debug ("%o", données) ; 

• https://getfirebug.com/wiki/index.php/Console_API
• https://developer.mozilla.org/en-US/docs/DOM/console