joli JSON imprimé en utilisant JavaScript


2427

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




4
Si vous sortez juste en html, vous pouvez l'envelopper dans une <pre>balise.
Ryan Walker

Réponses:


5059

Pretty-printing est implémenté en natif dansJSON.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 mettre en évidence la syntaxe, vous pouvez utiliser une 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:


23
Super génial. J'ai ajouté une fonction pour ouvrir ceci dans une nouvelle fenêtre de débogage: var json = syntaxHighlight (JSON.stringify (obj, undefined, 4);); var w = window.open (); var html = "<head> <style> pre {contour: 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

16
Agréable. N'oubliez pas qu'il a besoin de CSS et A <pre>, cependant.
NoBugs

4
pour une raison quelconque, quand je l'alerte, il montre en effet formaté mais montre toujours une chaîne plate lorsque je la recrache via jQuery: $ ("# transactionResponse"). show (). html (prettifyObject (data), null, '\ t'); où prettifyObject est une méthode que j'ai créée qui contient vos deux premières lignes ci-dessus.
PositiveGuy

5
@CoffeeAddict Assurez-vous que votre #transactionResponseélément a white-space: pre;un style CSS.
user123444555621

72
Notez que cela stringify(...)fonctionne sur les objets JSON , pas sur les chaînes JSON. Si vous avez une chaîne, vous devez d' JSON.parse(...)abord
Vihung

271

La réponse de l'utilisateur Pumbaa80 est excellente si vous avez un objet que vous souhaitez assez imprimé. Si vous commencez à partir d'une chaîne JSON valide que vous souhaitez imprimer, vous devez d'abord la convertir en objet:

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

Cela crée un objet JSON à partir de la chaîne, puis le reconvertit en une chaîne à l'aide de la jolie impression de JSON stringify.


11
Cela a fonctionné pour moi, mais a jeté une erreur en utilisant JSON.parsedonc je l'ai modifié pour être JSON.stringify(jsonString, null, 2). Dépend de votre JSON / objet.
Jazzy

15
Notez que lors de l'affichage de la chaîne, vous devez l'encapsuler dans des <pre></pre>balises.
Undistraction

6
@Jazzy JSON.parsene meurt que si vous avez une chaîne JSON invalide ou si elle est déjà convertie en objet ... assurez-vous de savoir de quel type de données vous traitez avant d'essayer deJSON.parse
Kolob Canyon

7
@Jazzy Si vous deviez le faire, vous n'aviez pas de chaîne JSON, vous aviez un objet normal. JSON est toujours une chaîne. Il s'agit simplement d'une représentation sous forme de chaîne d'un objet Javascript.
Clonkex

37

Meilleure façon.

Prettify JSON Array en Javascript

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

3
Merci! Cette solution est ce que je cherchais personnellement parce que je voulais simplement mettre un JSON en retrait dans une <textarea>
Turbo

2
C'est mieux parce que vous n'utilisez que la fonction javascript de base qui ne nécessite pas de calcul supplémentaire, ce qui pourrait entraîner des problèmes de performances si l'opération est répétée plusieurs fois. La seule chose qui me manquait pour que cela fonctionne était les balises <pre>.
CL

Parfait et exactement ce que je cherchais! Court, doux et précis.
John

Hou la la! Merci! Ça m'aide beaucoup.
judian

29

Sur la base de la réponse de Pumbaa80, j'ai modifié le code pour utiliser les couleurs console.log (fonctionnant sur Chrome à coup sûr) et non 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 au symbole% avec cette ligne, après la déclaration des variables:

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

Mais je découvre que Chrome ne prend pas en charge% d'échappement dans la console. Étrange ... Peut-être que cela fonctionnera à l'avenir.

À votre santé!

entrez la description de l'image ici


1
J'ai utilisé votre code mais j'obtiens la sortie au format json mais je n'obtiens pas la couleur et aussi dans la dernière j'obtiens la balise de couleur c'est la sortie {"erreur": {"code": 0, "message": "O"}}, couleur: rouge ,, couleur: rouge ,, couleur: darkorange
ramesh027

25
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 une balise <pre></pre>

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

Exemple:


1
Qu'est-ce qu'une "balise"?
Dan Dascalescu

ça veut dire "tag" en français
Aymeric Bouzy aybbyk

Le <pre>est un must si vous affichez le JSON dans un fichier <div>. A voté juste pour cet indice!
Manuel

23

J'utilise l' extension JSONView Chrome (c'est aussi joli que possible :):

Modifier: ajouté jsonreport.js

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

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


1
J'avais besoin d'une bibliothèque Javascript * .js qui pourrait imprimer une chaîne JSON en ajoutant des éléments et des classes html. Quelque chose comme var result = prettyPrint ('{"key": "value"}');
Mark

21

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

Il utilise la coloration syntaxique , l' indentation intelligente , supprime les guillemets des clés et rend 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})}))"


Y a-t-il un moyen de l'obtenir pour qu'il commence à s'étendre?
Daniel Sokolowski

Que voulez-vous dire @DanielSokolowski?
adius

dans les outils de développement Chrome, je dois cliquer sur le petit triangle pour accéder aux touches d'objets, comment le développer automatiquement? snag.gy/7wPqsl.jpg
Daniel Sokolowski

Mh. Bonne question. Je n'en connais pas, mais ce serait utile en effet…
adius

9

Voici l'impressionnant code HTML de user123444555621 adapté aux terminaux. Pratique pour déboguer les scripts Node:

function prettyJ(json) {
  if (typeof json !== 'string') {
    json = JSON.stringify(json, undefined, 2);
  }
  return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, 
    function (match) {
      let cls = "\x1b[36m";
      if (/^"/.test(match)) {
        if (/:$/.test(match)) {
          cls = "\x1b[34m";
        } else {
          cls = "\x1b[32m";
        }
      } else if (/true|false/.test(match)) {
        cls = "\x1b[35m"; 
      } else if (/null/.test(match)) {
        cls = "\x1b[31m";
      }
      return cls + match + "\x1b[0m";
    }
  );
}

Usage:

// thing = any json OR string of json
prettyJ(thing);

7

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

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

3
-1; cela équivaut à simplement faire console.debug(data);dans (au moins) Chrome et Firefox. Il ne montre pas une représentation JSON data, et encore moins une jolie impression.
Mark Amery

1
@MarkAmery Il y a 2 ans, cette fonctionnalité était nouvelle pour le navigateur et fonctionne uniquement comme je l'ai décrit. Si vous êtes trop jeune - je suis content pour vous! Une syntaxe comme celle-ci console.debug("%s: %o x %d", str, data, cnt);peut également être utile à quelqu'un.
gavenkoa

2
Regardez également console.dirce qui permet de naviguer dans les données.
Christophe Roussy

7

Insatisfait des autres jolies imprimantes pour Ruby, j'ai écrit le mien ( NeatJSON ), puis je l'ai porté en JavaScript, y compris un formateur en ligne gratuit . Le code est gratuit sous licence MIT (assez permissif).

Caractéristiques (toutes facultatives):

  • Définissez une largeur de ligne et un habillage d'une manière qui garde les objets et les tableaux sur la même ligne lorsqu'ils s'adaptent, en encapsulant une valeur par ligne lorsqu'ils ne le font pas.
  • Triez les clés d'objets si vous le souhaitez.
  • Alignez les clés des objets (alignez les deux points).
  • Formatez les nombres à virgule flottante en un nombre spécifique de décimales, sans gâcher les entiers.
  • Le mode d'habillage «court» place les crochets / accolades ouvrants et fermants sur la même ligne que les valeurs, fournissant un format que certains préfèrent.
  • Contrôle granulaire de l'espacement des tableaux et des objets, entre crochets, avant / après deux-points et virgules.
  • La fonction est mise à la disposition des navigateurs Web et de Node.js.

Je vais copier le code source ici afin que ce ne soit pas seulement un lien vers une bibliothèque, mais je vous encourage à aller sur la page du projet GitHub , car cela sera maintenu à jour et le code ci-dessous ne le sera pas.

(function(exports){
exports.neatJSON = neatJSON;

function neatJSON(value,opts){
  opts = opts || {}
  if (!('wrap'          in opts)) opts.wrap = 80;
  if (opts.wrap==true) opts.wrap = -1;
  if (!('indent'        in opts)) opts.indent = '  ';
  if (!('arrayPadding'  in opts)) opts.arrayPadding  = ('padding' in opts) ? opts.padding : 0;
  if (!('objectPadding' in opts)) opts.objectPadding = ('padding' in opts) ? opts.padding : 0;
  if (!('afterComma'    in opts)) opts.afterComma    = ('aroundComma' in opts) ? opts.aroundComma : 0;
  if (!('beforeComma'   in opts)) opts.beforeComma   = ('aroundComma' in opts) ? opts.aroundComma : 0;
  if (!('afterColon'    in opts)) opts.afterColon    = ('aroundColon' in opts) ? opts.aroundColon : 0;
  if (!('beforeColon'   in opts)) opts.beforeColon   = ('aroundColon' in opts) ? opts.aroundColon : 0;

  var apad  = repeat(' ',opts.arrayPadding),
      opad  = repeat(' ',opts.objectPadding),
      comma = repeat(' ',opts.beforeComma)+','+repeat(' ',opts.afterComma),
      colon = repeat(' ',opts.beforeColon)+':'+repeat(' ',opts.afterColon);

  return build(value,'');

  function build(o,indent){
    if (o===null || o===undefined) return indent+'null';
    else{
      switch(o.constructor){
        case Number:
          var isFloat = (o === +o && o !== (o|0));
          return indent + ((isFloat && ('decimals' in opts)) ? o.toFixed(opts.decimals) : (o+''));

        case Array:
          var pieces  = o.map(function(v){ return build(v,'') });
          var oneLine = indent+'['+apad+pieces.join(comma)+apad+']';
          if (opts.wrap===false || oneLine.length<=opts.wrap) return oneLine;
          if (opts.short){
            var indent2 = indent+' '+apad;
            pieces = o.map(function(v){ return build(v,indent2) });
            pieces[0] = pieces[0].replace(indent2,indent+'['+apad);
            pieces[pieces.length-1] = pieces[pieces.length-1]+apad+']';
            return pieces.join(',\n');
          }else{
            var indent2 = indent+opts.indent;
            return indent+'[\n'+o.map(function(v){ return build(v,indent2) }).join(',\n')+'\n'+indent+']';
          }

        case Object:
          var keyvals=[],i=0;
          for (var k in o) keyvals[i++] = [JSON.stringify(k), build(o[k],'')];
          if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });
          keyvals = keyvals.map(function(kv){ return kv.join(colon) }).join(comma);
          var oneLine = indent+"{"+opad+keyvals+opad+"}";
          if (opts.wrap===false || oneLine.length<opts.wrap) return oneLine;
          if (opts.short){
            var keyvals=[],i=0;
            for (var k in o) keyvals[i++] = [indent+' '+opad+JSON.stringify(k),o[k]];
            if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });
            keyvals[0][0] = keyvals[0][0].replace(indent+' ',indent+'{');
            if (opts.aligned){
              var longest = 0;
              for (var i=keyvals.length;i--;) if (keyvals[i][0].length>longest) longest = keyvals[i][0].length;
              var padding = repeat(' ',longest);
              for (var i=keyvals.length;i--;) keyvals[i][0] = padRight(padding,keyvals[i][0]);
            }
            for (var i=keyvals.length;i--;){
              var k=keyvals[i][0], v=keyvals[i][1];
              var indent2 = repeat(' ',(k+colon).length);
              var oneLine = k+colon+build(v,'');
              keyvals[i] = (opts.wrap===false || oneLine.length<=opts.wrap || !v || typeof v!="object") ? oneLine : (k+colon+build(v,indent2).replace(/^\s+/,''));
            }
            return keyvals.join(',\n') + opad + '}';
          }else{
            var keyvals=[],i=0;
            for (var k in o) keyvals[i++] = [indent+opts.indent+JSON.stringify(k),o[k]];
            if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });
            if (opts.aligned){
              var longest = 0;
              for (var i=keyvals.length;i--;) if (keyvals[i][0].length>longest) longest = keyvals[i][0].length;
              var padding = repeat(' ',longest);
              for (var i=keyvals.length;i--;) keyvals[i][0] = padRight(padding,keyvals[i][0]);
            }
            var indent2 = indent+opts.indent;
            for (var i=keyvals.length;i--;){
              var k=keyvals[i][0], v=keyvals[i][1];
              var oneLine = k+colon+build(v,'');
              keyvals[i] = (opts.wrap===false || oneLine.length<=opts.wrap || !v || typeof v!="object") ? oneLine : (k+colon+build(v,indent2).replace(/^\s+/,''));
            }
            return indent+'{\n'+keyvals.join(',\n')+'\n'+indent+'}'
          }

        default:
          return indent+JSON.stringify(o);
      }
    }
  }

  function repeat(str,times){ // http://stackoverflow.com/a/17800645/405017
    var result = '';
    while(true){
      if (times & 1) result += str;
      times >>= 1;
      if (times) str += str;
      else break;
    }
    return result;
  }
  function padRight(pad, str){
    return (str + pad).substring(0, pad.length);
  }
}
neatJSON.version = "0.5";

})(typeof exports === 'undefined' ? this : exports);

5

Merci beaucoup @all! Sur la base des réponses précédentes, voici une autre variante de méthode fournissant des règles de remplacement personnalisées en paramètre:

 renderJSON : function(json, rr, code, pre){
   if (typeof json !== 'string') {
      json = JSON.stringify(json, undefined, '\t');
   }
  var rules = {
   def : 'color:black;',    
   defKey : function(match){
             return '<strong>' + match + '</strong>';
          },
   types : [
       {
          name : 'True',
          regex : /true/,
          type : 'boolean',
          style : 'color:lightgreen;'
       },

       {
          name : 'False',
          regex : /false/,
          type : 'boolean',
          style : 'color:lightred;'
       },

       {
          name : 'Unicode',
          regex : /"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?/,
          type : 'string',
          style : 'color:green;'
       },

       {
          name : 'Null',
          regex : /null/,
          type : 'nil',
          style : 'color:magenta;'
       },

       {
          name : 'Number',
          regex : /-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/,
          type : 'number',
          style : 'color:darkorange;'
       },

       {
          name : 'Whitespace',
          regex : /\s+/,
          type : 'whitespace',
          style : function(match){
             return '&nbsp';
          }
       } 

    ],

    keys : [
       {
           name : 'Testkey',
           regex : /("testkey")/,
           type : 'key',
           style : function(match){
             return '<h1>' + match + '</h1>';
          }
       }
    ],

    punctuation : {
          name : 'Punctuation',
          regex : /([\,\.\}\{\[\]])/,
          type : 'punctuation',
          style : function(match){
             return '<p>________</p>';
          }
       }

  };

  if('undefined' !== typeof jQuery){
     rules = $.extend(rules, ('object' === typeof rr) ? rr : {});  
  }else{
     for(var k in rr ){
        rules[k] = rr[k];
     }
  }
    var str = json.replace(/([\,\.\}\{\[\]]|"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
    var i = 0, p;
    if (rules.punctuation.regex.test(match)) {
               if('string' === typeof rules.punctuation.style){
                   return '<span style="'+ rules.punctuation.style + '">' + match + '</span>';
               }else if('function' === typeof rules.punctuation.style){
                   return rules.punctuation.style(match);
               } else{
                  return match;
               }            
    }

    if (/^"/.test(match)) {
        if (/:$/.test(match)) {
            for(i=0;i<rules.keys.length;i++){
            p = rules.keys[i];
            if (p.regex.test(match)) {
               if('string' === typeof p.style){
                   return '<span style="'+ p.style + '">' + match + '</span>';
               }else if('function' === typeof p.style){
                   return p.style(match);
               } else{
                  return match;
               }                
             }              
           }   
            return ('function'===typeof rules.defKey) ? rules.defKey(match) : '<span style="'+ rules.defKey + '">' + match + '</span>';            
        } else {
            return ('function'===typeof rules.def) ? rules.def(match) : '<span style="'+ rules.def + '">' + match + '</span>';
        }
    } else {
        for(i=0;i<rules.types.length;i++){
         p = rules.types[i];
         if (p.regex.test(match)) {
               if('string' === typeof p.style){
                   return '<span style="'+ p.style + '">' + match + '</span>';
               }else if('function' === typeof p.style){
                   return p.style(match);
               } else{
                  return match;
               }                
          }             
        }

     }

    });

  if(true === pre)str = '<pre>' + str + '</pre>';
  if(true === code)str = '<code>' + str + '</code>';
  return str;
 }

Qu'est-ce que l'argument "rr"?
2017

1
@manking ... rules = $ .extend (rules, ('object' === typeof rr)? rr: {}); ... c'est d'étendre le jeu de règles par un objet rulset. (vous trouverez peut-être des mises à jour: github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js/… )
webfan



4

J'ai rencontré un problème aujourd'hui avec le code de @ Pumbaa80. J'essaie d'appliquer la coloration syntaxique JSON aux données que je rend dans une vue Mithril , j'ai donc besoin de créer des nœuds DOM pour tout dans la JSON.stringifysortie.

J'ai également divisé la regex très longue en ses composants.

render_json = (data) ->
  # wraps JSON data in span elements so that syntax highlighting may be
  # applied. Should be placed in a `whitespace: pre` context
  if typeof(data) isnt 'string'
    data = JSON.stringify(data, undefined, 2)
  unicode =     /"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?/
  keyword =     /\b(true|false|null)\b/
  whitespace =  /\s+/
  punctuation = /[,.}{\[\]]/
  number =      /-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/

  syntax = '(' + [unicode, keyword, whitespace,
            punctuation, number].map((r) -> r.source).join('|') + ')'
  parser = new RegExp(syntax, 'g')

  nodes = data.match(parser) ? []
  select_class = (node) ->
    if punctuation.test(node)
      return 'punctuation'
    if /^\s+$/.test(node)
      return 'whitespace'
    if /^\"/.test(node)
      if /:$/.test(node)
        return 'key'
      return 'string'

    if /true|false/.test(node)
      return 'boolean'

     if /null/.test(node)
       return 'null'
     return 'number'
  return nodes.map (node) ->
    cls = select_class(node)
    return Mithril('span', {class: cls}, node)

Code en contexte sur Github ici


4

Voici un simple composant format / couleur JSON écrit en React:

const HighlightedJSON = ({ json }: Object) => {
  const highlightedJSON = jsonObj =>
    Object.keys(jsonObj).map(key => {
      const value = jsonObj[key];
      let valueType = typeof value;
      const isSimpleValue =
        ["string", "number", "boolean"].includes(valueType) || !value;
      if (isSimpleValue && valueType === "object") {
        valueType = "null";
      }
      return (
        <div key={key} className="line">
          <span className="key">{key}:</span>
          {isSimpleValue ? (
            <span className={valueType}>{`${value}`}</span>
          ) : (
            highlightedJSON(value)
          )}
        </div>
      );
    });
  return <div className="json">{highlightedJSON(json)}</div>;
};

Voyez-le fonctionner dans ce CodePen: https://codepen.io/benshope/pen/BxVpjo

J'espère que cela pourra aider!



3

Si vous en avez besoin pour travailler dans une zone de texte, la solution acceptée ne fonctionnera pas.

<textarea id='textarea'></textarea>

$("#textarea").append(formatJSON(JSON.stringify(jsonobject),true));

function formatJSON(json,textarea) {
    var nl;
    if(textarea) {
        nl = "&#13;&#10;";
    } else {
        nl = "<br>";
    }
    var tab = "&#160;&#160;&#160;&#160;";
    var ret = "";
    var numquotes = 0;
    var betweenquotes = false;
    var firstquote = false;
    for (var i = 0; i < json.length; i++) {
        var c = json[i];
        if(c == '"') {
            numquotes ++;
            if((numquotes + 2) % 2 == 1) {
                betweenquotes = true;
            } else {
                betweenquotes = false;
            }
            if((numquotes + 3) % 4 == 0) {
                firstquote = true;
            } else {
                firstquote = false;
            }
        }

        if(c == '[' && !betweenquotes) {
            ret += c;
            ret += nl;
            continue;
        }
        if(c == '{' && !betweenquotes) {
            ret += tab;
            ret += c;
            ret += nl;
            continue;
        }
        if(c == '"' && firstquote) {
            ret += tab + tab;
            ret += c;
            continue;
        } else if (c == '"' && !firstquote) {
            ret += c;
            continue;
        }
        if(c == ',' && !betweenquotes) {
            ret += c;
            ret += nl;
            continue;
        }
        if(c == '}' && !betweenquotes) {
            ret += nl;
            ret += tab;
            ret += c;
            continue;
        }
        if(c == ']' && !betweenquotes) {
            ret += nl;
            ret += c;
            continue;
        }
        ret += c;
    } // i loop
    return ret;
}

3

Si vous cherchez une belle bibliothèque pour embellir json sur une page web ...

Prism.js est assez bon.

http://prismjs.com/

J'ai trouvé que l'utilisation de JSON.stringify (obj, undefined, 2) pour obtenir l'indentation, puis l'utilisation de prisme pour ajouter un thème était une bonne approche.

Si vous chargez dans JSON via un appel ajax, vous pouvez exécuter l'une des méthodes utilitaires de Prism pour affiner

Par exemple:

Prism.highlightAll()

1

C'est sympa:

https://github.com/mafintosh/json-markup depuismafintosh

const jsonMarkup = require('json-markup')
const html = jsonMarkup({hello:'world'})
document.querySelector('#myElem').innerHTML = html

HTML

<link ref="stylesheet" href="style.css">
<div id="myElem></div>

Un exemple de feuille de style peut être trouvé ici

https://raw.githubusercontent.com/mafintosh/json-markup/master/style.css

1

Impossible de trouver une solution qui avait une bonne mise en évidence de la syntaxe pour la console, alors voici mon 2p

Installer et ajouter une dépendance cli-highlight

npm install cli-highlight --save

Définir logjson globalement

const highlight = require('cli-highlight').highlight
console.logjson = (obj) => console.log(
                               highlight( JSON.stringify(obj, null, 4), 
                                          { language: 'json', ignoreIllegals: true } ));

Utilisation

console.logjson({foo: "bar", someArray: ["string1", "string2"]});

production


0

Voici comment imprimer sans utiliser la fonction native.

function pretty(ob, lvl = 0) {

  let temp = [];

  if(typeof ob === "object"){
    for(let x in ob) {
      if(ob.hasOwnProperty(x)) {
        temp.push( getTabs(lvl+1) + x + ":" + pretty(ob[x], lvl+1) );
      }
    }
    return "{\n"+ temp.join(",\n") +"\n" + getTabs(lvl) + "}";
  }
  else {
    return ob;
  }

}

function getTabs(n) {
  let c = 0, res = "";
  while(c++ < n)
    res+="\t";
  return res;
}

let obj = {a: {b: 2}, x: {y: 3}};
console.log(pretty(obj));

/*
  {
    a: {
      b: 2
    },
    x: {
      y: 3
    }
  }
*/

0

La façon la plus simple d'afficher un objet à des fins de débogage:

console.log("data",data) // lets you unfold the object manually

Si vous souhaitez afficher l'objet dans le DOM, vous devez considérer qu'il pourrait contenir des chaînes qui seraient interprétées comme HTML. Par conséquent, vous devez vous échapper ...

var s = JSON.stringify(data,null,2) // format
var e = new Option(s).innerHTML // escape
document.body.insertAdjacentHTML('beforeend','<pre>'+e+'</pre>') // display

0
<!-- here is a complete example pretty print with more space between lines-->
<!-- be sure to pass a json string not a json object -->
<!-- use line-height to increase or decrease spacing between json lines -->

<style  type="text/css">
.preJsonTxt{
  font-size: 18px;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 200%;
}
.boxedIn{
  border: 1px solid black;
  margin: 20px;
  padding: 20px;
}
</style>

<div class="boxedIn">
    <h3>Configuration Parameters</h3>
    <pre id="jsonCfgParams" class="preJsonTxt">{{ cfgParams }}</pre>
</div>

<script language="JavaScript">
$( document ).ready(function()
{
     $(formatJson);

     <!-- this will do a pretty print on the json cfg params      -->
     function formatJson() {
         var element = $("#jsonCfgParams");
         var obj = JSON.parse(element.text());
        element.html(JSON.stringify(obj, undefined, 2));
     }
});
</script>

0

Pour le mettre en valeur et l'embellir en HTMLutilisant Bootstrap:

function prettifyJson(json, prettify) {
    if (typeof json !== 'string') {
        if (prettify) {
            json = JSON.stringify(json, undefined, 4);
        } else {
            json = JSON.stringify(json);
        }
    }
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
        function(match) {
            let cls = "<span>";
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = "<span class='text-danger'>";
                } else {
                    cls = "<span>";
                }
            } else if (/true|false/.test(match)) {
                cls = "<span class='text-primary'>";
            } else if (/null/.test(match)) {
                cls = "<span class='text-info'>";
            }
            return cls + match + "</span>";
        }
    );
}

-1

Je recommande d'utiliser HighlightJS . Il utilise le même principe que la réponse acceptée, mais fonctionne également pour de nombreuses autres langues et possède de nombreux schémas de couleurs prédéfinis . Si vous utilisez RequireJS , vous pouvez générer un module compatible avec

python3 tools/build.py -tamd json xml <specify other language here>

La génération repose sur Python3 et Java. Ajoutez -npour générer une version non réduite.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.