Question Comment puis-je imprimer JSON en JavaScript?


Comment puis-je afficher JSON dans un format facile à lire (pour les lecteurs humains)? Je cherche principalement l'indentation et les espaces blancs, avec peut-être même des couleurs / styles de polices / etc.


1660
2018-01-26 22:33


origine


Réponses:


La jolie impression est implémentée nativement dans JSON.stringify(). Le troisième argument permet une jolie impression et définit l'espacement à utiliser:

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

Si vous avez besoin de surligner la syntaxe, vous pouvez utiliser de la magie regex comme ceci:

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 action ici: jsfiddle

Ou un extrait complet fourni ci-dessous:

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


3692
2017-08-28 10:56



La réponse de l'utilisateur Pumbaa80 est géniale si vous avez un objet tu veux joli imprimé. Si vous partez d'un JSON valide chaîne que vous voulez imprimer, vous devez d'abord le convertir en objet:

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

Cela génère un objet JSON à partir de la chaîne, puis le convertit en une chaîne à l'aide de la jolie impression de JSON stringify.


180
2018-06-21 20:35



Basé sur la réponse de Pumbaa80 j'ai modifié le code pour utiliser les couleurs de console.log (fonctionnant sur Chrome pour sûr) et pas HTML. La sortie peut être vue à l'intérieur de la console. Vous pouvez modifier les _variables à l'intérieur de la fonction en ajoutant 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);

Usage:

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

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

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

Mais je découvre que Chrome ne supporte pas% d'échappement dans la console. Étrange ... Peut-être que cela fonctionnera dans le futur.

À votre santé!

enter image description here


23
2018-01-29 13:16



Je utilise l JSONView Chrome extension (C'est aussi joli que ça devient :):

Modifier: ajouté jsonreport.js

Jsonreport.js est un visualiseur JSON autonome en ligne, qui fournit un rapport HTML5 lisible par l'utilisateur que vous pouvez utiliser pour afficher toutes les données JSON.

Vous pouvez en savoir plus sur le format en Nouveau format de rapport HTML5 pour JavaScript.


20
2018-01-26 22:37



Vous pouvez utiliser console.dir(), qui est un raccourci pour console.log(util.inspect()). (La seule différence est qu'il contourne toute coutume inspect() fonction définie sur un objet.)

Il utilise mise en évidence de la syntaxe, indentation intelligente, supprime les citations des clés et rend juste la sortie aussi jolie que possible.

const object = JSON.parse(jsonString)

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

et pour la ligne de commande:

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



Meilleure façon.

Prétitionner JSON Array en Javascript

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

11
2017-10-21 10:19



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

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

En cas d'affichage en HTML, vous devez ajouter un balise <pre></pre>

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

Exemple:

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



À des fins de débogage, j'utilise:

console.debug ("% o", données);

5
2018-01-10 14:11