Câu hỏi Làm thế nào tôi có thể in đẹp JSON bằng JavaScript?


Làm thế nào tôi có thể hiển thị JSON ở định dạng dễ đọc (cho người đọc)? Tôi đang tìm kiếm chủ yếu cho thụt đầu dòng và khoảng trắng, có lẽ thậm chí là màu / kiểu phông chữ / v.v.


1666
2018-01-26 22:33


gốc


Có thể trùng lặp Làm thế nào tôi có thể làm đẹp JSON theo lập trình? - hippietrail
@hippietrail meta.stackoverflow.com/q/251938/3853934 - Michał Perłakowski
Nếu bạn chỉ xuất ra html, bạn có thể bọc nó trong một <pre> nhãn. - Ryan Walker


Các câu trả lời:


Khá in được thực hiện nguyên bản trong JSON.stringify(). Đối số thứ ba cho phép in đẹp và đặt khoảng cách để sử dụng:

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

Nếu bạn cần đánh dấu cú pháp, bạn có thể sử dụng một số phép thuật regex như sau:

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

Xem trong hành động ở đây: jsfiddle

Hoặc một đoạn mã đầy đủ được cung cấp bên dưới:

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


3709
2017-08-28 10:56



Siêu tuyệt vời. Tôi đã thêm một hàm để mở cửa sổ này trong cửa sổ mới để gỡ lỗi: var json = syntaxHighlight (JSON.stringify (obj, undefined, 4);); var w = window.open (); var html = "<head> <style> trước {outline: 1px rắn #ccc; đệm: 5px; lề: 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
Tốt đẹp. Đừng quên nó cần css và một <pre>, Tuy nhiên. - NoBugs
vì một số lý do, khi tôi cảnh báo nó, nó thực sự cho thấy định dạng tuy nhiên vẫn hiển thị một chuỗi phẳng khi tôi nhổ nó ra một div thông qua jQuery: $ ("# transactionResponse"). show (). html (prettifyObject (data), null, '\ t'); trong đó prettifyObject là phương thức tôi đã tạo có chứa hai dòng đầu tiên của bạn ở trên. - PositiveGuy
@CoffeeAddict Đảm bảo rằng #transactionResponse phần tử có white-space: pre; như một phong cách CSS. - user123444555621
Lưu ý rằng stringify(...) hoạt động trên JSON các đối tượng, không phải trên các chuỗi JSON. Nếu bạn có một chuỗi, bạn cần phải JSON.parse(...) Đầu tiên - Vihung


Câu trả lời của người dùng Pumbaa80 là tuyệt vời nếu bạn có vật bạn muốn in đẹp. Nếu bạn đang bắt đầu từ một JSON hợp lệ chuỗi mà bạn muốn in đẹp, trước tiên bạn cần phải chuyển đổi nó thành một đối tượng:

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

Điều này xây dựng một đối tượng JSON từ chuỗi, và sau đó chuyển đổi nó trở lại thành chuỗi bằng cách sử dụng bản in đẹp của JSON stringify.


181
2018-06-21 20:35



Điều này làm việc cho tôi, nhưng đã ném một lỗi bằng cách sử dụng JSON.parse vì vậy tôi đã sửa đổi nó thành JSON.stringify(jsonString, null, 2). Phụ thuộc vào JSON / Object của bạn. - Jazzy
Lưu ý rằng khi hiển thị chuỗi bạn cần phải quấn nó vào <pre></pre> thẻ. - Undistraction
@Jazzy JSON.parse chỉ chết nếu bạn có một đường JSON không hợp lệ hoặc nó đã được chuyển đổi thành một đối tượng ... hãy chắc chắn rằng bạn biết những gì datatype của bạn đang đối phó với trước khi cố gắng JSON.parse - Kolob Canyon
@Undistraction Nhận xét của bạn hữu ích đối với tôi, tôi sẽ kiểm tra xem bạn có cần kiểm tra chính xác không pre làm. - Dhaval Jardosh
@ Jazzy Nếu bạn phải làm điều đó, bạn không có một chuỗi JSON, bạn đã có một đối tượng bình thường. JSON là luôn luôn một chuỗi. Nó chỉ là một biểu diễn dạng chuỗi của một đối tượng Javascript. - Clonkex


Dựa trên câu trả lời của Pumbaa80 tôi đã sửa đổi mã để sử dụng màu console.log (hoạt động trên Chrome chắc chắn) và không phải HTML. Đầu ra có thể được nhìn thấy bên trong giao diện điều khiển. Bạn có thể chỉnh sửa các _variables bên trong hàm thêm một số kiểu dáng.

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

Đây là một bookmarklet bạn có thể sử dụng:

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

Sử dụng:

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

Chỉnh sửa: Tôi chỉ cố gắng để thoát khỏi biểu tượng% với dòng này, sau khi khai báo biến:

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

Nhưng tôi thấy Chrome không hỗ trợ% thoát trong bảng điều khiển. Lạ thật ... Có lẽ điều này sẽ có hiệu quả trong tương lai.

Chúc mừng!

enter image description here


23
2018-01-29 13:16



Tôi sử dụng mã ur nhưng tôi nhận được đầu ra ở định dạng json nhưng tôi không nhận được màu sắc và cũng trong cuối cùng tôi nhận được thẻ màu này là đầu ra {"lỗi": {"mã": 0, "tin nhắn": "O"}}, màu sắc: đỏ ,, màu sắc: đỏ ,, màu sắc: darkorange - ramesh027
+1 cho đề xuất sử dụng làm bookmarklet! cảm ơn - Renato Gama


tôi sử dụng Tiện ích mở rộng JSONView của Chrome (nó là đẹp như nó được :):

Chỉnh sửa: đã thêm jsonreport.js

Tôi cũng đã phát hành trình xem bản in JSON độc lập trực tuyến, jsonreport.js, cung cấp báo cáo HTML5 có thể đọc được con người mà bạn có thể sử dụng để xem bất kỳ dữ liệu JSON nào.

Bạn có thể đọc thêm về định dạng trong Định dạng báo cáo HTML5 JavaScript mới.


20
2018-01-26 22:37



Tôi cần một thư viện Javascript * .js có thể in một chuỗi JSON thêm các phần tử và lớp html. Một cái gì đó như var result = prettyPrint ('{"key": "value"}'); - Mark
Điều này là tuyệt vời, bởi vì nó dễ dàng được thêm vào. Bạn thậm chí có thể thay đổi cài đặt màu <3 - Luca Steeb


Bạn có thể dùng console.dir(), đó là lối tắt cho console.log(util.inspect()). (Sự khác biệt duy nhất là nó bỏ qua bất kỳ tùy chỉnh nào inspect() chức năng được xác định trên một đối tượng.)

Nó sử dụng làm nổi bật cú pháp, thụt lề thông minh, xóa dấu ngoặc kép khỏi các phím và chỉ làm cho đầu ra đẹp như nó được.

const object = JSON.parse(jsonString)

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

và cho dòng lệnh:

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



Bất kỳ cách nào để có được nó để nó bắt đầu mở rộng? - Daniel Sokolowski
Ý bạn là gì @DanielSokolowski? - adius
trong Công cụ dành cho nhà phát triển Chrome Tôi phải nhấp vào hình tam giác nhỏ để nhận các phím đối tượng thứ, có cách nào để tự động mở rộng không? snag.gy/7wPqsl.jpg - Daniel Sokolowski
Mh. Câu hỏi hay. Tôi không biết một, nhưng nó sẽ rất hữu ích ... - adius


Cách tốt hơn.

Tạo khung JSON trong Javascript

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

11
2017-10-21 10:19



Tốt hơn cái gì và như thế nào? - Dan Dascalescu
@DanDascalescu Tốt hơn tất cả những điều trên? - adamj


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

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

Trong trường hợp hiển thị trong HTML, bạn nên thêm một số dư <pre></pre>

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

Thí dụ:

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





Đối với mục đích gỡ lỗi tôi sử dụng:

console.debug ("% o", dữ liệu);

5
2018-01-10 14:11



-1; điều này tương đương với việc làm console.debug(data); trong (ít nhất) Chrome và Firefox. Nó không hiển thị một biểu diễn JSON data, hãy để một mình một bản in đẹp. - Mark Amery
@MarkAmery 2 năm trước đây tính năng này mới cho trình duyệt và chỉ hoạt động như tôi đã mô tả. Nếu bạn còn quá trẻ - Tôi rất vui vì bạn! Cũng cú pháp như console.debug("%s: %o x %d", str, data, cnt); vẫn có thể hữu ích cho ai đó. - gavenkoa
Cũng nhìn vào console.dir cho phép điều hướng dữ liệu. - Christophe Roussy


Không hài lòng với các máy in đẹp khác dành cho Ruby, tôi đã viết của riêng mình (NeatJSON) và sau đó chuyển nó sang JavaScript kể cả một trình định dạng trực tuyến miễn phí. Mã miễn phí theo giấy phép MIT (khá dễ chấp nhận).

Tính năng (tất cả tùy chọn):

  • Đặt chiều rộng đường kẻ và bọc theo cách giữ các đối tượng và mảng trên cùng một dòng khi chúng vừa với nhau, gói một giá trị trên mỗi dòng khi chúng không.
  • Sắp xếp các khóa đối tượng nếu bạn muốn.
  • Căn chỉnh các khóa đối tượng (xếp hàng các dấu hai chấm).
  • Định dạng số dấu chấm động cho số thập phân cụ thể, mà không làm rối các số nguyên.
  • Chế độ gói 'ngắn' đặt mở và đóng dấu ngoặc / dấu ngoặc nhọn trên cùng một dòng với các giá trị, cung cấp định dạng mà một số người thích.
  • Kiểm soát chi tiết trên khoảng cách cho mảng và đối tượng, giữa các dấu ngoặc, trước / sau dấu hai chấm và dấu phẩy.
  • Chức năng được cung cấp cho cả trình duyệt web và Node.js.

Tôi sẽ sao chép mã nguồn ở đây để đây không chỉ là một liên kết đến một thư viện, nhưng tôi khuyến khích bạn đi đến Trang dự án GitHub, vì điều đó sẽ được cập nhật và mã bên dưới sẽ không.

(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
2018-04-19 21:49