javascript - কিভাবে আমি জাভাস্ক্রিপ্ট ব্যবহার করে JSON চমত্কার মুদ্রণ করতে পারেন?




pretty-print (16)

কিভাবে আমি সহজে পড়তে (মানব পাঠকদের জন্য) ফরম্যাটে JSON প্রদর্শন করতে পারি? আমি প্রাথমিকভাবে ইন্ডেন্টেশন এবং হোয়াইটস্পেসের জন্য, সম্ভবত রঙ / ফন্ট-শৈলী / ইত্যাদি খুঁজছেন।


Pumbaa80 এর উত্তরের উপর ভিত্তি করে আমি কনসোল.লগ রংগুলি ব্যবহার করার জন্য কোডটি সংশোধন করেছি (নিশ্চিতভাবে ক্রোমে কাজ করছি) এবং HTML নয়। আউটপুট কনসোল ভিতরে দেখা যাবে। আপনি ফাংশন ভিতরে _variables কিছু আরো স্টাইলিং যোগ করতে পারেন।

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

এখানে একটি বুকমার্কলেট যা আপনি ব্যবহার করতে পারেন:

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

ব্যবহার:

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

সম্পাদন: ভেরিয়েবল ঘোষণার পরে আমি এই লাইনটির সাথে% চিহ্ন থেকে পালাতে চেষ্টা করেছি:

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

কিন্তু আমি জানি যে Chrome কনসোলে% escaping সমর্থন করে না। অদ্ভুত ... হয়তো এই ভবিষ্যতে কাজ করবে।

চিয়ার্স!


অনেক ধন্যবাদ @ সব! পূর্ববর্তী উত্তরগুলির উপর ভিত্তি করে, এখানে আরেকটি বৈকল্পিক পদ্ধতি রয়েছে যা প্যারামিটার হিসাবে কাস্টম প্রতিস্থাপনের নিয়ম সরবরাহ করে:

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

আপনি JSON.stringify ব্যবহার করতে পারেন (আপনার অবজেক্ট, নাল, 2) দ্বিতীয় প্যারামিটারটি একটি রেপ্লাসার ফাংশন হিসাবে ব্যবহার করা যেতে পারে যা প্যারামিটার হিসাবে কী এবং Val কে নেয়। এটি আপনার JSON অবজেক্টের মধ্যে কিছু পরিবর্তন করতে চাইলে ব্যবহার করা যেতে পারে।


আপনি Pubaa80 এর উত্তরটি যদি দুর্দান্ত প্রিন্ট করতে চান এমন একটি বস্তু থাকে তবে এটি দুর্দান্ত। আপনি যদি কোনও সুন্দর JSON স্ট্রিং থেকে শুরু করতে চান যা আপনি বেশিরভাগ মুদ্রণ করতে চান তবে আপনাকে এটি প্রথমে একটি বস্তুর রূপান্তর করতে হবে:

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

এটি স্ট্রিং থেকে একটি JSON অবজেক্ট তৈরি করে এবং তারপর JSON স্ট্রিংফি এর চমত্কার মুদ্রণ ব্যবহার করে এটি একটি স্ট্রিংে রূপান্তর করে।


আমি JSONView Chrome এক্সটেনশানটি ব্যবহার করি (এটি যতটা সুন্দর পায় :)

সম্পাদনা: যোগ jsonreport.js

আমি একটি অনলাইন স্ট্যান্ড-অ্যালেন JSON প্রশংসনীয় মুদ্রণ প্রদর্শক, jsonreport.js প্রকাশ করেছি, যা একটি মানব পঠনযোগ্য HTML5 প্রতিবেদন সরবরাহ করে যা আপনি কোনও JSON ডেটা দেখতে ব্যবহার করতে পারেন।

আপনি নতুন জাভাস্ক্রিপ্ট HTML5 প্রতিবেদন বিন্যাসে বিন্যাস সম্পর্কে আরও পড়তে পারেন।


আমি HighlightJS ব্যবহার করে সুপারিশ। এটি গ্রহণযোগ্য উত্তর হিসাবে একই নীতি ব্যবহার করে, তবে এটি অন্যান্য অনেক ভাষার জন্যও কাজ করে এবং এতে অনেক পূর্বনির্ধারিত রঙের স্কিম রয়েছে । প্রয়োজন RequireJS ব্যবহার করে, আপনি একটি উপযুক্ত মডিউল তৈরি করতে পারেন

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

জেনারেশন Python3 এবং জাভা উপর নির্ভর করে। একটি non-minified সংস্করণ তৈরি করতে Add- -n



এখানে আপনি কিভাবে স্থানীয় ফাংশন ব্যবহার করে মুদ্রণ করতে পারেন।

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
    }
  }
*/

এখানে ব্যবহারকারী 123444555621 এর দুর্দান্ত HTML টি টার্মিনালের জন্য অভিযোজিত। নোড স্ক্রিপ্ট ডিবাগিং জন্য হ্যান্ডি:

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

ব্যবহার:

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

এটা সুন্দর:

mafintosh থেকে https://github.com/mafintosh/json-markup

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

এইচটিএমএল

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

উদাহরণ স্টাইলশীট এখানে পাওয়া যাবে

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

জাভাস্ক্রিপ্ট লাইব্রেরিতে ডগলাস ক্রকফোর্ডের JSON চমত্কার পদ্ধতির মাধ্যমে JSON প্রিন্ট করবে।

আপনি এই পুরনো প্রশ্নের উত্তরগুলিও খুঁজে পেতে পারেন: আমি কীভাবে (ইউনিক্স) শেল স্ক্রিপ্টে চমত্কার মুদ্রণ করতে পারি?



যদি আপনি কোনও ওয়েব লাইব্রেরিতে জসনকে সুন্দর করার জন্য একটি সুন্দর লাইব্রেরি খুঁজছেন ...

Prism.js বেশ ভাল।

http://prismjs.com/

আমি ইন্ডেন্টেশন পেতে JSON.stringify (obj, undefined, 2) ব্যবহার করে খুঁজে পেয়েছি এবং তারপর থিম যোগ করার জন্য প্রিজম ব্যবহার করে একটি ভাল পদ্ধতি ছিল।

যদি আপনি একটি AJAX কল মাধ্যমে JSON লোড করছেন, তাহলে আপনি প্রিজম এর ইউটিলিটি পদ্ধতিগুলির মধ্যে একটি চালাতে পারেন

উদাহরণ স্বরূপ:

Prism.highlightAll()

যদি আপনি টেক্সটেয়ারে কাজ করতে চান তবে গ্রহণযোগ্য সমাধান কাজ করবে না।

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

সুন্দর-মুদ্রণটি JSON.stringify() নেটিভভাবে প্রয়োগ করা হয় । তৃতীয় যুক্তি চমত্কার মুদ্রণ সক্ষম করে এবং ব্যবহার করার জন্য ফাঁক সেট:

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

আপনি সিনট্যাক্স হাইলাইটিং প্রয়োজন হলে, আপনি তাই কিছু regex যাদু ব্যবহার করতে পারেন:

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

এখানে কর্ম দেখুন: jsfiddle

অথবা নিচে দেওয়া একটি সম্পূর্ণ স্নিপেট:

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


Newtonsoft.Json ডিল ব্যবহার করুন। এই IE এবং ক্রোম সূক্ষ্ম কাজ

আপনার রেজার ভিউ এই কোড রাখুন

    if (Model.YourJsonSting!= null)
        {
            <pre>
            <code style="display:block;white-space:pre-wrap">
                      @JToken.Parse(Model.YourJsonSting).ToString(Formatting.Indented)
                </code>
            </pre>
        }






pretty-print