জাভাস্ক্রিপ্ট ব্যবহার করে প্রিন্ট-প্রিন্ট জেএসএন


2425

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




3
আপনি যদি কেবল এইচটিএমএল এ আউটপুট দিচ্ছেন তবে আপনি এটিকে একটি <pre>ট্যাগে মুড়িয়ে রাখতে পারেন ।
রায়ান ওয়াকার

উত্তর:


5057

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

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

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

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

বা নীচে সরবরাহ করা একটি সম্পূর্ণ স্নিপেট:


23
দুর্দান্ত দুর্দান্ত। আমি এটি ডিবাগিংয়ের জন্য একটি নতুন উইন্ডোতে পপ করতে একটি ফাংশন যুক্ত করেছি: var json = সিনট্যাক্স হাইটলাইট (JSON.stringify (اعتراض, অপরিজ্ঞাত, 4););); var w = window.open (); var html = "<মাথা> <স্টাইল> প্রাক {রূপরেখা: 1px কঠিন # সিসি; প্যাডিং: 5px; মার্জিন: 5px;}। স্ট্রিং {রঙ: সবুজ;}"; এইচটিএমএল + = "। সংখ্যা {রঙ: গাo় রং; oo এইচটিএমএল + = "<pre>" + জসন + "</ translation>"; w.document.writeln (HTML);
জেক্রস্লার

16
খুশী হলাম। <pre>যদিও এটি সিএসএস এবং এ দরকার , তবে ভুলবেন না ।
NoBugs

4
কোনও কারণে, যখন আমি এটি সতর্ক করি তখন এটি ফর্ম্যাটেড দেখায় তবে jQuery: $ ("# ট্রানজেকশন রিপ্পন") দেখান () এইচটিএমএল (প্রিটিফাইওবজেক্ট (ডেটা), নাল, '\ t'); যেখানে prettifyObject একটি পদ্ধতি আমি তৈরি করেছি যা উপরে আপনার প্রথম দুটি লাইন রয়েছে lines
PositiveGuy

5
@ কফিএডিক্ট আপনার #transactionResponseউপাদানটি white-space: pre;সিএসএস শৈলী হিসাবে রয়েছে তা নিশ্চিত করুন ।
ব্যবহারকারী 123444555621

72
নোট করুন যে stringify(...)JSON অবজেক্টে কাজ করে JSON স্ট্রিংগুলিতে নয়, । আপনার যদি স্ট্রিং থাকে তবে আপনাকে JSON.parse(...)প্রথমে দরকার
vihung

271

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

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

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


11
এটি আমার জন্য কাজ করেন, কিন্তু ব্যবহার করার সময় একটি ত্রুটি নিক্ষেপ JSON.parseতাই আমি পরিবর্তিত এটা হতে JSON.stringify(jsonString, null, 2)। আপনার JSON / অবজেক্টের উপর নির্ভর করে।
জাজি

14
নোট করুন যে স্ট্রিংটি প্রদর্শন করার সময় আপনার এটি <pre></pre>ট্যাগগুলিতে মোড়ানো প্রয়োজন ।
আনডিস্ট্রাকশন

6
@ জাজি JSON.parseকেবল তখনই মারা যায় যদি আপনার কোনও অবৈধ জেএসওএন স্ট্র থাকে বা এটি ইতিমধ্যে কোনও বস্তুতে রূপান্তরিত হয় ... নিশ্চিত হয়ে নিন যে আপনি চেষ্টা করছেন তার আগে কী কী ডেটাটাইপ করছেনJSON.parse
কলব ক্যানিয়ন

@ উদ্বোধন আপনার মন্তব্যটি আমার পক্ষে কার্যকর ছিল, আমি ঠিক কী preকরে তা যাচাই করার দরকার যাচাই করব ।
ধাওয়াল জর্দোষ

7
@ জাজি যদি আপনার এটি করতে হয় তবে আপনার কাছে জেএসএন স্ট্রিং ছিল না, আপনার একটি সাধারণ বিষয় ছিল। জেএসএন সর্বদা একটি স্ট্রিং। এটি জাভাস্ক্রিপ্ট অবজেক্টের কেবল একটি স্ট্রিং-ভিত্তিক উপস্থাপনা।
ক্লোনকেক্স

37

3
ধন্যবাদ! এই সমাধানটি আমি ব্যক্তিগতভাবে সন্ধান করছিলাম কারণ আমি কেবল <টেক্সটেকের </a> এ একটি ইন্টেন্টেড জেএসএন স্থাপন করতে চেয়েছিলাম
টার্বো

2
এটি আরও ভাল কারণ আপনি কেবলমাত্র বেসিক জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করছেন যার জন্য অতিরিক্ত গণনার প্রয়োজন নেই যা ক্রিয়াকলাপের সমস্যার কারণ হতে পারে যদি বেশ কয়েকবার পুনরাবৃত্তি করা হয়। এই কাজ করার জন্য কেবল জিনিসটি আমার জন্য অনুপস্থিত ছিল was ট্যাগগুলি pre
সিএল

নিখুঁত এবং ঠিক আমি যা খুঁজছিলাম! সংক্ষিপ্ত, মিষ্টি, এবং বিন্দু.
জন

কি দারুন! ধন্যবাদ! এটা আমার জন্য খুব সহায়ক।
বিচারক

28

পুম্বা ৮০ এর উত্তরের ভিত্তিতে আমি কনসোল.লগ রঙগুলি (নিশ্চিতভাবে ক্রোমে কাজ করা) এবং এইচটিএমএল ব্যবহার করার জন্য কোডটি পরিবর্তন করেছি। কনসোলের ভিতরে আউটপুট দেখা যায়। আপনি আরও কিছু স্টাইল যুক্ত করে ফাংশনের অভ্যন্তরে _ পরিবর্তনগুলি সম্পাদনা করতে পারেন।

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, '%%');

তবে আমি খুঁজে পেয়েছি যে কনসোলে ক্রোম% পলায়ন সমর্থন করে না। অদ্ভুত ... সম্ভবত এটি ভবিষ্যতে কাজ করবে।

চিয়ার্স!

এখানে চিত্র বর্ণনা লিখুন


1
আমি আপনার কোডটি ব্যবহার করেছি তবে আমি জসন ফর্ম্যাটে আউটপুট পাচ্ছি তবে আমি রঙটি পাচ্ছি না এবং শেষের দিকে আমি রঙ ট্যাগও পাচ্ছি এটি আউটপুট is "ত্রুটি": {"কোড": 0, "বার্তা": "O" কে}}, রঙ: লাল ,, রঙ: লাল ,, রঙ: 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);

এইচটিএমএল প্রদর্শিত হয় ক্ষেত্রে, আপনি একটি বলিস যোগ করা উচিত <pre></pre>

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

উদাহরণ:



ফরাসী ভাষায় এর অর্থ "ট্যাগ"
আইরিমিক বুজি আইব্বাইক

<pre>একটি আবশ্যক আপনি একটি মধ্যে তাদেরকে JSON দেন <div>। উত্সাহিত ঠিক সেই ইঙ্গিতটির জন্য!
ম্যানুয়েল

23

আমি জেএসনভিউ ক্রোম এক্সটেনশনটি ব্যবহার করি (এটি যতটা সুন্দর হয় :):

সম্পাদনা: যুক্ত হয়েছে jsonreport.js

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

আপনি নতুন জাভাস্ক্রিপ্ট এইচটিএমএল 5 প্রতিবেদন ফর্ম্যাটে ফর্ম্যাটটি সম্পর্কে আরও পড়তে পারেন ।


1
আমার একটি জাভাস্ক্রিপ্ট * .js লাইব্রেরি দরকার যা এইচটিএমএল উপাদান এবং ক্লাস যুক্ত জেএসওএন স্ট্রিং প্রিন্ট করতে পারে। ভের রেজাল্টের মতো কিছু = সুন্দর মুদ্রণ ('{"কী": "মান"}');
চিহ্নিত করুন

21

আপনি ব্যবহার করতে পারেন console.dir(), এটির জন্য একটি শর্টকাট console.log(util.inspect())। (পার্থক্য কেবলমাত্র এটি কোনও inspect()বস্তুর উপরে নির্ধারিত কোনও কাস্টম ফাংশনকে ছাড়িয়ে যায়))

এটি সিনট্যাক্স-হাইলাইটিং , স্মার্ট ইনডেন্টেশন ব্যবহার করে , কীগুলি থেকে উদ্ধৃতিগুলি সরিয়ে দেয় এবং আউটপুটটিকে যতটা সুন্দর করে তোলে ততই সুন্দর করে তোলে।

const object = JSON.parse(jsonString)

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

এবং কমান্ড লাইনের জন্য:

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


এটি পেতে কোনও উপায় তাই এটি প্রসারিত শুরু হয়?
ড্যানিয়েল সোকলোভস্কি

আপনি কি ড্যানিয়েলসোকলোভস্কি বলতে চান?
অ্যাডিয়াস

ক্রোম বিকাশকারী সরঞ্জামগুলিতে আমাকে অবজেক্ট কীগুলিতে উঠতে অবশ্যই ছোট ত্রিভুজটি ক্লিক করতে হবে, এটি স্বয়ংক্রিয়ভাবে প্রসারিত করার কোনও উপায়? snag.gy/7wPqsl.jpg
ড্যানিয়েল

এমএইচ। ভাল প্রশ্ন. আমি এক সচেতন নই, কিন্তু এটা প্রকৃতপক্ষে সহায়ক হবে ...
adius

9

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

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

7

ডিবাগিং উদ্দেশ্যে আমি ব্যবহার করি:

কনসোল.দেবগ ("% o", ডেটা);

3
-1; এটি কেবলমাত্র console.debug(data);(অন্তত) Chrome এবং ফায়ারফক্সে করার সমান equivalent এটি কোনও JSON এর প্রতিনিধিত্ব দেখায় না data, একটি সুন্দর-প্রিন্টেড যাক।
মার্ক অ্যামেরি

1
@ মার্কআমেরি 2 বছর আগে ব্রাউজারের জন্য এই বৈশিষ্ট্যটি নতুন ছিল এবং আমি যেমন বর্ণনা করেছি ঠিক তেমনই কাজ করে। আপনি যদি খুব কম বয়সী হন - আমি আপনার জন্য খুশি! এছাড়াও সিনট্যাক্সের মতো console.debug("%s: %o x %d", str, data, cnt);কারও কারও পক্ষে সহায়ক হতে পারে।
gavenkoa

2
এছাড়াও console.dirডেটা নেভিগেট করতে পারবেন যা দেখুন ।
ক্রিস্টোফ রাউসি

7

রুবির অন্যান্য প্রিন্টারের সাথে অসন্তুষ্ট, আমি আমার নিজের ( NeatJSON ) লিখেছিলাম এবং তারপরে একটি নিখরচায় অনলাইন ফর্ম্যাটার সহ জাভাস্ক্রিপ্টে পোর্ট করেছি । কোডটি এমআইটি লাইসেন্সের অধীনে বিনামূল্যে (বেশ অনুমতিপ্রাপ্ত) perm

বৈশিষ্ট্য (সমস্ত alচ্ছিক):

  • একটি লাইনের প্রস্থ সেট করুন এবং এমনভাবে মোড়ানো যাতে বস্তু এবং অ্যারেগুলি উপযুক্ত হলে একই লাইনে রাখে, যখন প্রতি লাইনে একটি মান আবৃত হয় না।
  • পছন্দ হলে অবজেক্ট কী বাছাই করুন।
  • অবজেক্ট কীগুলি সারিবদ্ধ করুন (কলোনগুলি সরিয়ে রাখুন)।
  • পূর্ণসংখ্যার গোলযোগ ছাড়াই ভাসমান পয়েন্ট সংখ্যা নির্দিষ্ট দশমিকের সংখ্যায় ফর্ম্যাট করুন।
  • 'শর্ট' মোড়ানোর মোড মান হিসাবে একই লাইনে বন্ধনী / বন্ধনীগুলি খোলার এবং বন্ধ রাখে, কিছু পছন্দ করে এমন ফর্ম্যাট সরবরাহ করে।
  • কোলন এবং কমা আগে / পরে বন্ধনীগুলির মধ্যে অ্যারে এবং অবজেক্টের জন্য ব্যবধানের উপর দানাদার নিয়ন্ত্রণ।
  • ফাংশন ওয়েব ব্রাউজার এবং নোড.জেএস উভয়ের জন্য উপলব্ধ করা হয়েছে।

আমি এখানে উত্স কোডটি অনুলিপি করব যাতে এটি কেবল একটি লাইব্রেরির লিঙ্ক নয়, তবে আমি আপনাকে গিটহাব প্রকল্পের পৃষ্ঠায় যেতে উত্সাহিত করব , কারণ এটি আপ টু ডেট থাকবে এবং নীচের কোডটি না থাকবে।

(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

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

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

"আরআর" যুক্তি কী?
14

1
@ ম্যানেজিং ... বিধিগুলি = $। প্রসারিত (নিয়ম, ('অবজেক্ট' === টাইপফ আর আর))? আরআর: {}); ... এটি কোনও রুলসেট অবজেক্ট দ্বারা রোলসেটটি প্রসারিত করা। (সম্ভবত আপনি আপডেটগুলি পাবেন: github.com/frdl/- ফ্লো / ব্লব / মাস্টার / api
d/4


4

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

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


4

আমি আজ @ পুম্বা ৮০ এর কোডটি নিয়ে একটি সমস্যায় পড়েছি। আমি মিথিলের দৃশ্যে যে ডেটা আমি রেন্ডার করছি তাতে জেএসএন সিনট্যাক্স প্রয়োগ করার চেষ্টা করছি , তাই আমাকে সমস্ত কিছুর জন্য ডোম নোড তৈরি করতে হবেJSON.stringify আউটপুটটির প্রতিটি ।

আমি সত্যিই দীর্ঘ উপাদানটিকে এর উপাদানগুলির অংশগুলিতেও বিভক্ত করেছি।

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)

গিথুব প্রসঙ্গে কোড এখানে


4

প্রতিক্রিয়াতে এখানে লিখিত একটি সাধারণ JSON ফর্ম্যাট / রঙের উপাদান:

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

এটি এই কোডপেনে কাজ করে দেখুন: https://codepen.io/benshope/pen/BxVpjo

আশা করি এইটি কাজ করবে!


4

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

আরও রেফারেন্স: https://developer.mozilla.org/en-US/docs/Web/ জাভা স্ক্রিপ্ট / রেফারেন্স / গ্লোবাল_অবজেক্টস / জেএসএন / স্ট্রিংফাইটি


3

আপনার যদি কোনও পাঠ্যর ক্ষেত্রে এটি প্রয়োজন হয় তবে গৃহীত সমাধানটি কাজ করবে না।

<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

আপনি যদি কোনও ওয়েব পৃষ্ঠায় জসনকে সুন্দর করার জন্য একটি দুর্দান্ত গ্রন্থাগার সন্ধান করছেন ...

প্রিজম.জেস বেশ ভাল।

http://prismjs.com/

আমি ইন্ডেন্টেশন পেতে JSON.stringify (অবজেক্ট, অপরিজ্ঞাত, ২) ব্যবহার করে খুঁজে পেয়েছি এবং তারপরে একটি থিম যুক্ত করতে প্রিজম ব্যবহার করা ভাল পন্থা ছিল।

আপনি যদি একটি আজাক্স কলের মাধ্যমে জেএসএন-এ লোড করছেন, তবে আপনি প্রিজমের একটি ইউটিলিটি পদ্ধতি প্রিটিটিভিং করতে চালাতে পারেন

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

Prism.highlightAll()

1

এটা সুন্দর:

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

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

1

কনসোলটির জন্য ভাল সিনট্যাক্স হাইলাইট করার কোনও সমাধান খুঁজে পেল না, সুতরাং আমার 2 পি

ক্লাই-হাইলাইট নির্ভরতা ইনস্টল করুন এবং যুক্ত করুন

npm install cli-highlight --save

বিশ্বজুড়ে লগজনকে সংজ্ঞায়িত করুন

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

ব্যবহার

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

আউটপুট


0

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

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

জেনারেশন পাইথন 3 এবং জাভার উপর নির্ভর করে। -nএকটি নন-মিনিফাইড সংস্করণ তৈরি করতে যুক্ত করুন ।


0

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

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

ডিবাগিংয়ের উদ্দেশ্যে কোনও অবজেক্ট প্রদর্শনের সহজ উপায়:

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

আপনি যদি ডিওমে অবজেক্টটি প্রদর্শন করতে চান তবে আপনাকে বিবেচনা করা উচিত যে এটিতে এমন স্ট্রিং থাকতে পারে যা এইচটিএমএল হিসাবে ব্যাখ্যা করা যেতে পারে। অতএব, আপনাকে কিছু পালানোর দরকার ...

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

এটি HTMLব্যবহার করে এটি হাইলাইট এবং শোভিত করার জন্য 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>";
        }
    );
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.