Comment puis-je imprimer JSON en utilisant JavaScript?

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

1737
demandé sur Shog9 2011-01-27 01:33:53
la source

24 ответов

d'impression est appliquée de manière native dans JSON.stringify() . Le troisième argument permet d'imprimer joliment et définit l'espacement à utiliser:

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

si vous avez besoin de mise en évidence de la syntaxe, vous pouvez utiliser un certain magic regex comme cela:

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; }
3835
répondu user123444555621 2017-05-31 13:48:56
la source

la réponse de L'utilisateur Pumbaa80 est grande si vous avez un objet vous voulez joliment imprimé. Si vous êtes à partir d'un JSON valide string que vous voulez joliment imprimé, vous devez le convertir en un objet en premier:

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

construit un objet JSON à partir de la chaîne, puis le convertit en une chaîne en utilisant la jolie impression de JSON stringify.

186
répondu Rick Hanlon II 2016-01-14 06:57:55
la source

basé sur la réponse de Pumbaa80 j'ai modifié le code pour utiliser la console.log colours (travailler sur Chrome pour sûr) et pas HTML. Sortie peut être vue à l'intérieur de la console. Vous pouvez éditer 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);

Utilisation:

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 les variables déclaration:

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

mais je découvre que Chrome ne supporte pas le % d'échappement dans la console. Étrange... Peut-être que cela va fonctionner dans l'avenir.

santé!

enter image description here

23
répondu Milen Boev 2016-12-20 01:03:38
la source

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

Edit: ajout de jsonreport.js

j'ai aussi sorti un JSON pretty print viewer autonome en ligne, jsonreport.js, qui fournit un rapport HTML5 lisible par un humain que vous pouvez utiliser pour visualiser toutes les données JSON.

vous pouvez en savoir plus sur le format dans nouveau format JavaScript HTML5 Report .

20
répondu mythz 2014-07-11 04:46:22
la source

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

Il utilise des syntaxe de mise en évidence de , "151980920 intelligent" indentation , supprime les citations de touches et tout à fait de la sortie d'aussi jolies qu'il obtient.

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
répondu adius 2016-05-02 16:18:57
la source

meilleure façon.

Embellir Tableau JSON Javascript

JSON.stringify(jsonobj,null,'\t')
13
répondu Charmie 2017-10-21 13:19:59
la source
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:

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>
9
répondu Adel MANI 2018-07-12 06:29:50
la source
5
répondu gavenkoa 2013-01-10 18:11:26
la source

insatisfait des autres jolies imprimantes pour Ruby, j'ai écrit la mienne ( NeatJSON ) et puis porté à JavaScript y compris un formatage en ligne gratuit . Le code est libre sous licence MIT (assez permissif).

Caractéristiques (Toutes facultatives):

  • définir une largeur de ligne et envelopper d'une manière qui maintient les objets et les tableaux sur la même ligne quand ils conviennent, en enveloppant une valeur par ligne quand ils ne le font pas.
  • trier les clés d'objet si vous le souhaitez.
  • aligner les touches d'objet (aligner les boutons).
  • Format des nombres à virgule flottante nombre de décimales, sans gâcher les entiers.
  • "Court" habillage de mode met d'ouverture et de fermeture crochets/croisillons sur la même ligne que les valeurs, en fournissant un format que certains préfèrent.
  • contrôle granulaire de l'espacement pour tableaux et objets, entre parenthèses, avant / après les colonnes et les virgules.
  • La fonction
  • est mise à la disposition des navigateurs web et des Noeuds.js.

je vais copier le code source ici pour que ce ne soit pas seulement un lien vers une bibliothèque, mais je vous encourage à aller à la GitHub page du projet , car il sera tenu à jour et le code ci-dessous ne 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);
4
répondu Phrogz 2015-04-20 00:49:25
la source

Merci beaucoup @tous! Basé sur les réponses précédentes, voici une autre méthode de variante fournissant des règles de remplacement personnalisées comme 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;
 }
3
répondu webfan 2016-11-30 02:13:10
la source

la bibliothèque JSON en JavaScript de Douglas Crockford imprimera JSON par la méthode stringify.

vous pouvez aussi trouver les réponses à cette question plus ancienne utile: Comment puis-je pretty-print JSON dans le script shell (unix)?

2
répondu zcopley 2017-05-23 15:02:45
la source

Ça fonctionne bien:

console.table()

pour en savoir plus: https://developer.mozilla.org/pt-BR/docs/Web/API/Console/table

2
répondu Ricardo Pontual 2017-03-15 14:51:24
la source

j'ai rencontré un problème aujourd'hui avec le code de @Pumbaa80. J'essaie d'appliquer la mise en évidence de la syntaxe JSON aux données que je rends dans une vue Mithril , donc j'ai besoin de créer des noeuds DOM pour tout dans la sortie JSON.stringify .

j'ai divisé le très long regex en ses composants ainsi.

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

2
répondu Just Jake 2017-08-03 07:35:55
la source

si vous avez besoin de cela pour travailler dans une textarea 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;
}
1
répondu Kolob Canyon 2017-04-05 03:13:26
la source

voici un simple format JSON / composant Couleur écrit dans 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>;
};

voir travailler dans ce CodePen: https://codepen.io/benshope/pen/BxVpjo

Espère que ça aide!

1
répondu benshope 2018-05-13 10:36:53
la source

vous pouvez utiliser JSON.stringify (votre objet, null, 2) Le second paramètre peut être utilisé comme une fonction de remplacement qui prend la clé et Val comme paramètres.Ceci peut être utilisé dans le cas où vous voulez modifier quelque chose dans votre objet JSON.

1
répondu jenil christo 2018-07-12 06:58:54
la source

voici user123444555621's awesome HTML one adapté pour les terminaux. Pratique pour déboguer les scripts de noeuds:

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

Utilisation:

// thing = any json OR string of json
prettyJ(thing);
1
répondu James Heazlewood 2018-07-13 10:35:34
la source

je recommande d'utiliser HighlightJS . Il utilise le même principe que la réponse acceptée, mais travaille aussi pour beaucoup d'autres langues , et a beaucoup de couleurs prédéfinies . Si vous utilisez Requerjs , vous pouvez générer un module compatible avec

python3 tools/build.py -tamd json xml <specify other language here>
La génération

s'appuie sur Python3 et Java. Ajouter -n pour générer une version non-miniaturisée.

0
répondu Rok Strniša 2014-09-03 17:32:55
la source

C'est bien:

https://github.com/mafintosh/json-markup à partir de mafintosh

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>

exemple de feuille de style peut être trouvé ici

https://raw.githubusercontent.com/mafintosh/json-markup/master/style.css
0
répondu wires 2016-12-23 01:14:24
la source

si vous êtes à la recherche d'une belle bibliothèque pour mettre en valeur json sur une page web...

Prism.js est plutôt bon.

http://prismjs.com /

j'ai trouvé en utilisant JSON.stringify(obj, undefined, 2) pour obtenir le retrait, puis à l'aide de prism pour ajouter un thème est une bonne approche.

si vous chargez dans JSON via un appel ajax, alors vous pouvez lancer L'une des méthodes utilitaire de Prism pour prettifier

par exemple:

Prism.highlightAll()
0
répondu chim 2017-11-19 19:24:06
la source

, Voici comment vous pouvez 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
répondu everlasto 2017-11-24 23:11:30
la source

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 voulez 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 faire un peu d'évasion ...

var s = JSON.stringify(data,null,2) // format
var e = new Option(s).innerHTML // escape
document.body.insertAdjacentHTML('beforeend','<pre>'+e+'</pre>') // display
0
répondu nobar 2018-07-04 06:48:02
la source

si vous utilisez net.sf.json, vous pouvez imprimer comme suit (en utilisant une indentation de 4 espaces):

JSONObject work = JSONObject.fromObject("{\"hi\":\"there\",\"more\":\"stuff\"}");
log.info("WORK="+work.toString(4));
-2
répondu Fred Haslam 2011-08-28 11:00:00
la source

Utilisez Newtonsoft.JSON dll. c'est du bon travail dans IE et Chrome

mettez ce code dans votre vue de rasoir

    if (Model.YourJsonSting!= null)
        {
            <pre>
            <code style="display:block;white-space:pre-wrap">
                      @JToken.Parse(Model.YourJsonSting).ToString(Formatting.Indented)
                </code>
            </pre>
        }
-6
répondu user3942119 2015-11-11 23:57:12
la source

Autres questions sur javascript json pretty-print