cukup cetak JSON menggunakan JavaScript


2427

Bagaimana saya bisa menampilkan JSON dalam format yang mudah dibaca (untuk pembaca manusia)? Saya terutama mencari lekukan dan spasi putih, dengan bahkan mungkin warna / font-style / dll.




4
Jika Anda hanya menghasilkan ke html, Anda dapat membungkusnya dengan <pre>tag.
Ryan Walker

Jawaban:


5059

Pencetakan cantik diterapkan secara asli diJSON.stringify() . Argumen ketiga memungkinkan pencetakan cantik dan mengatur jarak untuk digunakan:

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

Jika Anda membutuhkan penyorotan sintaks, Anda mungkin menggunakan beberapa sihir regex seperti:

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

Lihat beraksi di sini: jsfiddle

Atau cuplikan lengkap yang disediakan di bawah ini:


23
Sangat luar biasa. Saya menambahkan fungsi untuk membuka ini di jendela baru untuk debugging: 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

16
Bagus. Tapi jangan lupa itu butuh css dan a <pre>.
NoBugs

4
untuk beberapa alasan, ketika saya memberitahukannya, itu memang menunjukkan diformat namun masih menunjukkan string datar ketika saya meludahkannya ke div melalui jQuery: $ ("# transactionResponse"). show (). html (prettifyObject (data), null, '\ t'); di mana prettifyObject adalah metode yang saya buat yang berisi dua baris pertama Anda di atas.
PositiveGuy

5
@CoffeeAddict Pastikan #transactionResponseelemen Anda memiliki white-space: pre;gaya CSS.
user123444555621

72
Perhatikan bahwa stringify(...)berfungsi pada objek JSON , bukan pada string JSON. Jika Anda memiliki string, Anda harus JSON.parse(...)terlebih dahulu
Vihung

271

Jawaban Pengguna Pumbaa80 sangat bagus jika Anda memiliki objek yang ingin Anda cetak. Jika Anda mulai dari string JSON yang valid yang ingin Anda cetak cantik, Anda harus mengonversinya menjadi objek pertama:

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

Ini membangun objek JSON dari string, dan kemudian mengubahnya kembali ke string menggunakan cetak cantik JSON stringify.


11
Ini bekerja untuk saya, tetapi melemparkan kesalahan menggunakan JSON.parsejadi saya memodifikasinya JSON.stringify(jsonString, null, 2). Tergantung pada JSON / Obyek Anda.
Jazzy

15
Perhatikan bahwa saat menampilkan string, Anda harus membungkusnya dengan <pre></pre>tag.
Undistraction

6
@Jazzy JSON.parsehanya mati jika Anda memiliki str JSON yang tidak valid atau sudah dikonversi ke objek ... pastikan Anda tahu tipe data apa yang Anda hadapi sebelum mencobaJSON.parse
Kolob Canyon

7
@ Jazzy Jika Anda harus melakukan itu, Anda tidak memiliki string JSON, Anda memiliki objek normal. JSON selalu berupa string. Itu hanya representasi berbasis string dari objek Javascript.
Clonkex

37

Cara yang lebih baik.

Prettify JSON Array dalam Javascript

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

3
Terima kasih! Solusi ini adalah apa yang saya cari secara pribadi karena saya ingin meletakkan JSON indentasi di <textarea>
Turbo

2
Ini lebih baik karena Anda hanya menggunakan fungsi javascript dasar yang tidak memerlukan perhitungan tambahan yang dapat menyebabkan masalah kinerja jika operasi diulang berkali-kali. Satu-satunya hal yang hilang bagi saya untuk berfungsi adalah tag <pre>.
CL

Sempurna dan persis apa yang saya cari! Pendek, manis dan to the point.
John

Wow! Terima kasih! Ini sangat membantu saya.
judian

29

Berdasarkan jawaban Pumbaa80, saya telah memodifikasi kode untuk menggunakan warna console.log (pasti bekerja pada Chrome) dan bukan HTML. Output dapat dilihat di dalam konsol. Anda dapat mengedit _variables di dalam fungsi dengan menambahkan beberapa style lagi.

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

Ini adalah bookmarklet yang dapat Anda gunakan:

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

Pemakaian:

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

Sunting: Saya baru saja mencoba melepaskan simbol% ​​dengan baris ini, setelah deklarasi variabel:

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

Tetapi saya mengetahui bahwa Chrome tidak mendukung% yang lolos di konsol. Aneh ... Mungkin ini akan berhasil di masa depan.

Bersulang!

masukkan deskripsi gambar di sini


1
Saya menggunakan kode ur tetapi saya mendapatkan output dalam format json tetapi saya tidak mendapatkan warna dan juga yang terakhir saya mendapatkan tag warna ini adalah output {"error": {"code": 0, "message": "O"}}, warna: merah ,, warna: merah ,, warna: 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);

Jika ditampilkan dalam HTML, Anda harus menambahkan balise <pre></pre>

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

Contoh:


1
Apa itu "balise"?
Dan Dascalescu

itu berarti "tag" dalam bahasa Prancis
Aymeric Bouzy aybbyk

The <pre>adalah suatu keharusan jika Anda menunjukkan JSON dalam <div>. Terpilih hanya untuk petunjuk itu!
Manuel

23

Saya menggunakan ekstensi Chrome JSONView (sama cantiknya dengan :):

Edit: ditambahkan jsonreport.js

Saya juga telah merilis penampil cetak cantik mandiri JSON online, jsonreport.js, yang menyediakan laporan HTML5 yang dapat dibaca manusia yang dapat Anda gunakan untuk melihat data JSON.

Anda dapat membaca lebih lanjut tentang format dalam Format Laporan JavaScript Baru HTML5 .


1
Saya membutuhkan perpustakaan Javascript * .js yang bisa mencetak string JSON dengan menambahkan elemen dan kelas html. Sesuatu seperti var result = prettyPrint ('{"key": "value"}');
Tandai

21

Anda dapat menggunakan console.dir(), yang merupakan jalan pintas untuk console.log(util.inspect()). (Satu-satunya perbedaan adalah ia mem-bypass inspect()fungsi kustom apa pun yang didefinisikan pada objek.)

Ini menggunakan penyorotan sintaks , indentasi pintar , menghilangkan tanda kutip dari kunci dan hanya membuat output secantik yang didapatnya.

const object = JSON.parse(jsonString)

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

dan untuk baris perintah:

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


Adakah cara untuk mendapatkannya sehingga mulai diperluas?
Daniel Sokolowski

Apa maksudmu @DanielSokolowski?
adius

di Alat Pengembang Chrome Saya harus mengeklik segitiga kecil untuk mendapatkan kunci objek, cara apa pun untuk memperluasnya? snag.gy/7wPqsl.jpg
Daniel Sokolowski

Mh Pertanyaan bagus. Saya tidak menyadarinya, tetapi akan sangat membantu ...
adius

9

Inilah HTML yang mengagumkan dari user123444555621 yang disesuaikan untuk terminal. Berguna untuk men-debug skrip 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";
    }
  );
}

Pemakaian:

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

7

3
-1; ini setara dengan hanya melakukan console.debug(data);di (setidaknya) Chrome dan Firefox. Itu tidak menunjukkan representasi JSON data, apalagi yang dicetak cantik.
Mark Amery

1
@MarkAmery 2 tahun lalu fitur ini baru untuk browser dan hanya berfungsi seperti yang saya jelaskan. Jika Anda terlalu muda - saya senang untuk Anda! Sintaksis seperti console.debug("%s: %o x %d", str, data, cnt);mungkin masih bermanfaat bagi seseorang.
gavenkoa

2
Lihat juga console.diryang memungkinkan untuk menavigasi data.
Christophe Roussy

7

Tidak puas dengan printer cantik lainnya untuk Ruby, saya menulis sendiri ( NeatJSON ) dan kemudian memindahkannya ke JavaScript termasuk formatter online gratis . Kode ini gratis di bawah lisensi MIT (cukup permisif).

Fitur (semua opsional):

  • Tetapkan lebar garis dan bungkus dengan cara yang membuat objek dan array pada baris yang sama ketika mereka cocok, membungkus satu nilai per baris ketika mereka tidak.
  • Urutkan kunci objek jika Anda suka.
  • Sejajarkan kunci objek (sejajar dengan titik dua).
  • Memformat angka floating point ke angka desimal tertentu, tanpa mengacaukan bilangan bulat.
  • Mode pembungkus 'Short' menempatkan kurung / kurung buka dan tutup pada baris yang sama dengan nilai, menyediakan format yang disukai beberapa orang.
  • Kontrol granular atas jarak untuk array dan objek, antara tanda kurung, sebelum / sesudah titik dua dan koma.
  • Fungsi tersedia untuk peramban web dan Node.js.

Saya akan menyalin kode sumber di sini sehingga ini bukan hanya tautan ke perpustakaan, tetapi saya mendorong Anda untuk pergi ke halaman proyek GitHub , karena itu akan terus diperbarui dan kode di bawah tidak akan.

(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

Terima kasih banyak @all! Berdasarkan jawaban sebelumnya, berikut adalah metode varian lain yang menyediakan aturan penggantian khusus sebagai parameter:

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

Apa itu argumen "rr"?
Manking

1
@manking ... rules = $ .extend (rules, ('object' === typeof rr)? rr: {}); ... itu adalah untuk memperpanjang aturan dengan objek set aturan. (mungkin Anda menemukan pembaruan: github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js/... )
webfan



4

Saya mengalami masalah hari ini dengan kode @ Pumbaa80. Saya mencoba menerapkan penyorotan sintaks JSON ke data yang saya render dalam tampilan Mithril , jadi saya perlu membuat simpul DOM untuk semua yang ada di JSON.stringifyoutput.

Saya membagi regex yang sangat panjang menjadi bagian-bagian komponennya juga.

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)

Kode dalam konteks pada Github di sini


4

Berikut adalah komponen format / warna JSON sederhana yang ditulis dalam Bereaksi:

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

Lihat itu berfungsi di CodePen ini: https://codepen.io/benshope/pen/BxVpjo

Semoga itu bisa membantu!



3

Jika Anda membutuhkan ini untuk bekerja dalam textarea solusi yang diterima tidak akan berfungsi.

<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

Jika Anda mencari pustaka yang bagus untuk membuat json cantik di halaman web ...

Prism.js cukup bagus.

http://prismjs.com/

Saya menemukan menggunakan JSON.stringify (obj, undefined, 2) untuk mendapatkan indentasi, dan kemudian menggunakan prisma untuk menambahkan tema adalah pendekatan yang baik.

Jika Anda memuat dalam JSON melalui panggilan ajax, maka Anda dapat menjalankan salah satu metode utilitas Prism untuk melakukan prettify

Sebagai contoh:

Prism.highlightAll()

1

Ini bagus:

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

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>

Contoh stylesheet dapat ditemukan di sini

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

1

Tidak dapat menemukan solusi apa pun yang memiliki penyorotan sintaks yang bagus untuk konsol, jadi inilah 2p saya

Instal & Tambahkan dependensi cli-highlight

npm install cli-highlight --save

Tentukan logjson secara global

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

Menggunakan

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

keluaran


0

Inilah cara Anda dapat mencetak tanpa menggunakan fungsi asli.

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

Cara paling sederhana untuk menampilkan objek untuk keperluan debugging:

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

Jika Anda ingin menampilkan objek di DOM, Anda harus mempertimbangkan bahwa itu bisa berisi string yang akan ditafsirkan sebagai HTML. Karena itu, Anda perlu melakukan beberapa pelarian ...

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

Untuk menyorot dan mempercantik dalam HTMLmenggunakan 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

Saya sarankan menggunakan HighlightJS . Ini menggunakan prinsip yang sama dengan jawaban yang diterima, tetapi bekerja juga untuk banyak bahasa lain , dan memiliki banyak skema warna yang telah ditentukan . Jika menggunakan RequireJS , Anda dapat membuat modul yang kompatibel dengan

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

Generasi bergantung pada Python3 dan Java. Tambahkan -nuntuk menghasilkan versi yang tidak diperkecil.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.