à¦¸à§à¦¨à§à¦¦à¦°-à¦®à§à¦¦à§à¦°à¦£ JSON à¦à¦¿?

à¦à¦¿ JSON.stringify à¦ªà¦¦à§à¦§à¦¤à¦¿?

Highlight.js à¦à¦¿?

জাভাস্ক্রিপ্টে

Noah Rousseau

বৃহস্পতিবার, ২৭ জুন, ২০২৪ ৮:৩১:২৭ PM

JSON কে মানুষের জন্য আরও পঠনযোগ্য করে তোলা

JSON-এর সাথে কাজ করা ডেভেলপারদের জন্য একটি সাধারণ কাজ, বিশেষ করে API এবং ডেটা স্টোরেজ নিয়ে কাজ করার সময়। যাইহোক, কাঁচা JSON ফরম্যাটিং এর অভাবের কারণে পড়া এবং বোঝা কঠিন হতে পারে। যারা JSONকে আরও অ্যাক্সেসযোগ্য করে তুলতে চান তাদের জন্য সঠিক ইন্ডেন্টেশন এবং হোয়াইটস্পেস প্রয়োগ করা অত্যন্ত গুরুত্বপূর্ণ।

এই নিবন্ধে, আমরা জাভাস্ক্রিপ্ট ব্যবহার করে JSON প্রিন্ট করার জন্য বিভিন্ন পদ্ধতি অন্বেষণ করব। আমরা কেবল মৌলিক ইন্ডেন্টেশন এবং হোয়াইটস্পেস কৌশলগুলিই কভার করব না, তবে রঙ এবং ফন্ট শৈলীগুলির সাথে কীভাবে পাঠযোগ্যতা বাড়ানো যায় তাও কভার করব। এই নির্দেশিকা আপনাকে কাঁচা JSON কে মানব-বান্ধব বিন্যাসে রূপান্তর করতে সাহায্য করবে।

আদেশ	বর্ণনা
JSON.stringify(json, null, 2)	2-স্পেস ইন্ডেন্টেশন সহ একটি জাভাস্ক্রিপ্ট অবজেক্টকে JSON স্ট্রিংয়ে রূপান্তর করে।
.replace(/(".*?"\|null\|true\|false\|\d+)/g, ...)	কাস্টম বিন্যাসের জন্য নির্দিষ্ট JSON উপাদানগুলি সনাক্ত করতে একটি নিয়মিত অভিব্যক্তি ব্যবহার করে।
http.createServer(...).listen()	Node.js-এ একটি HTTP সার্ভার তৈরি করে যা একটি নির্দিষ্ট পোর্টে শোনে।
res.writeHead(200, { 'Content-Type': 'application/json' })	বিষয়বস্তুর প্রকার JSON তা নির্দেশ করতে HTTP প্রতিক্রিয়া শিরোনাম সেট করে।
res.end()	ক্লায়েন্টের কাছে প্রতিক্রিয়া ফেরত পাঠায় এবং সমস্ত প্রতিক্রিয়া শিরোনাম এবং বডি পাঠানো হয়েছে বলে সংকেত দেয়।
document.body.innerHTML	নথিতে বডি এলিমেন্টের HTML কন্টেন্ট সেট করে বা পায়।

JSON ফরম্যাটিং স্ক্রিপ্টের বিস্তারিত ব্যাখ্যা

প্রথম স্ক্রিপ্ট হল একটি ফ্রন্টএন্ড জাভাস্ক্রিপ্ট সলিউশন যা ইন্ডেন্টেশন যোগ করে এবং কালার কোডিং প্রয়োগ করে JSON কে প্রিন্ট-প্রিন্ট করার জন্য ডিজাইন করা হয়েছে। স্ক্রিপ্ট নামের একটি ফাংশন দিয়ে শুরু হয় prettyPrintJSON, যা ইনপুট হিসাবে একটি JSON অবজেক্ট নেয়। এই ফাংশনের ভিতরে, JSON অবজেক্টটিকে 2-স্পেস ইন্ডেন্টেশন ব্যবহার করে একটি স্ট্রিং-এ রূপান্তরিত করা হয় JSON.stringify(json, null, 2) পদ্ধতি এটি নিশ্চিত করে যে প্রয়োজনীয় হোয়াইটস্পেস যোগ করে JSON আরও পঠনযোগ্য। আরও পঠনযোগ্যতা বাড়াতে, স্ক্রিপ্ট ব্যবহার করে a .replace(/(".*?"|null|true|false|\d+)/g, ...) স্ট্রিং, সংখ্যা, বুলিয়ান এবং নাল মানগুলির মতো নির্দিষ্ট JSON উপাদানগুলির সাথে মেলে রেগুলার এক্সপ্রেশন সহ পদ্ধতি। প্রতিটি মিলে যাওয়া উপাদান a তে মোড়ানো হয় একটি সংশ্লিষ্ট ক্লাসের সাথে ট্যাগ করুন, যার ফলে CSS প্রতিটি ডেটা টাইপের জন্য বিভিন্ন রঙ প্রয়োগ করতে পারে। বিন্যাসিত JSON স্ট্রিংটি তারপর ব্যবহার করে নথির বডিতে ঢোকানো হয় document.body.innerHTML.

দ্বিতীয় স্ক্রিপ্ট হল একটি ব্যাকএন্ড সলিউশন যা Node.js ব্যবহার করে JSON প্রিন্ট-প্রিন্ট করে। এই স্ক্রিপ্ট একটি HTTP সার্ভার তৈরি করে http.createServer(...), যা একটি নির্দিষ্ট পোর্ট ব্যবহার করে ইনকামিং অনুরোধের জন্য শোনে .listen(). একটি অনুরোধ পাওয়ার পরে, সার্ভার পাঠযোগ্যতার জন্য বিন্যাসিত একটি JSON অবজেক্টের সাথে প্রতিক্রিয়া জানায়। JSON অবজেক্টটি ইন্ডেন্টেশন ব্যবহার করে একটি স্ট্রিংয়ে রূপান্তরিত হয় JSON.stringify(json, null, 2). প্রতিক্রিয়া শিরোনামটি নির্দেশ করতে সেট করা হয়েছে যে বিষয়বস্তুর ধরনটি JSON এর সাথে res.writeHead(200, { 'Content-Type': 'application/json' }). অবশেষে, সুন্দর-মুদ্রিত JSON স্ট্রিং ব্যবহার করে ক্লায়েন্টকে পাঠানো হয় res.end(). এই স্ক্রিপ্টটি ডেভেলপারদের সহজভাবে সার্ভারের ঠিকানায় নেভিগেট করে তাদের ব্রাউজারে সুন্দরভাবে ফরম্যাট করা JSON আউটপুট দেখতে দেয়।

ভাল পঠনযোগ্যতার জন্য JSON ফর্ম্যাট করতে JavaScript ব্যবহার করা

ফ্রন্টএন্ড জাভাস্ক্রিপ্ট

// Function to pretty-print JSON with indentation and colors
function prettyPrintJSON(json) {
  // Convert JSON object to string with 2-space indentation
  const jsonString = JSON.stringify(json, null, 2);
  // Replace specific characters for color coding
  return jsonString.replace(/(".*?"|null|true|false|\d+)/g, match => {
    let cls = "number";
    if (/^".*"$/.test(match)) {
      cls = "string";
    } else if (/true|false/.test(match)) {
      cls = "boolean";
    } else if (/null/.test(match)) {
      cls = "null";
    }
    return `<span class="${cls}">${match}</span>`;
  });
}
// JSON data
const jsonData = {
  "name": "John",
  "age": 30,
  "city": "New York",
  "isStudent": false
};
// Display formatted JSON
document.body.innerHTML = `<pre>${prettyPrintJSON(jsonData)}</pre>`;

প্রিটি-প্রিন্ট JSON-এর ব্যাকএন্ড অ্যাপ্রোচ

Node.js এর সাথে ব্যাকএন্ড

const http = require('http');
const url = require('url');
// Function to pretty-print JSON
function prettyPrintJSON(json) {
  return JSON.stringify(json, null, 2);
}
// Create HTTP server
http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'application/json' });
  // Sample JSON data
  const jsonData = {
    name: "John",
    age: 30,
    city: "New York",
    isStudent: false
  };
  // Send pretty-printed JSON
  res.end(prettyPrintJSON(jsonData));
}).listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

অতিরিক্ত সরঞ্জামগুলির সাথে JSON পাঠযোগ্যতা বৃদ্ধি করা

যদিও পূর্ববর্তী সমাধানগুলি JSON-প্রিন্ট করার জন্য ফ্রন্টএন্ড এবং ব্যাকএন্ড জাভাস্ক্রিপ্ট পদ্ধতিগুলির উপর দৃষ্টি নিবদ্ধ করে, সেখানে অন্যান্য সরঞ্জাম এবং কৌশল রয়েছে যা JSON পাঠযোগ্যতাকে আরও উন্নত করতে পারে। একটি জনপ্রিয় পদ্ধতি হল ব্রাউজার এক্সটেনশন বা অনলাইন টুল ব্যবহার করা। JSONView বা JSON ফর্ম্যাটারের মত এক্সটেনশনগুলি স্বয়ংক্রিয়ভাবে ব্রাউজারে JSON ফর্ম্যাট করতে পারে, পঠনযোগ্যতা উন্নত করতে ইন্ডেন্টেশন এবং কালার কোডিং যোগ করে। এই টুলগুলি বিশেষ করে এমন ডেভেলপারদের জন্য উপযোগী যারা প্রায়শই API-এর সাথে ইন্টারঅ্যাক্ট করেন এবং অতিরিক্ত কোড না লিখে JSON ডেটা দ্রুত পার্স করতে এবং বুঝতে চান।

আরেকটি দরকারী পদ্ধতির মধ্যে রয়েছে হাইলাইট.js বা Prism.js-এর মতো লাইব্রেরিগুলি ব্যবহার করা, যেগুলি JSON সহ বিভিন্ন প্রোগ্রামিং ভাষার জন্য সিনট্যাক্স হাইলাইট পরিচালনা করার জন্য ডিজাইন করা হয়েছে। এই লাইব্রেরিগুলিকে ওয়েব অ্যাপ্লিকেশনগুলিতে একত্রিত করা যেতে পারে গতিশীলভাবে বিন্যাস এবং JSON ডেটা হাইলাইট করতে। ব্যবহার করে Highlight.js, আপনি JSON স্ট্রিংগুলিতে পূর্বনির্ধারিত থিম প্রয়োগ করতে পারেন, এটি বিভিন্ন ডেটা প্রকারের মধ্যে পার্থক্য করা সহজ করে তোলে৷ অতিরিক্তভাবে, এই ধরনের লাইব্রেরিগুলিকে আপনার ডেভেলপমেন্ট ওয়ার্কফ্লোতে একীভূত করা সময় বাঁচাতে পারে এবং বিভিন্ন প্রোজেক্ট জুড়ে JSON ফর্ম্যাটিং-এ ধারাবাহিকতা নিশ্চিত করতে পারে।

JSON ফরম্যাটিং সম্পর্কিত প্রায়শ জিজ্ঞাসিত প্রশ্নাবলী

সুন্দর-মুদ্রণ JSON কি?
প্রিটি-প্রিন্টিং JSON বলতে ইন্ডেন্টেশন এবং হোয়াইটস্পেস সহ JSON ডেটা ফর্ম্যাট করা বোঝায় যাতে এটি মানুষের জন্য আরও পাঠযোগ্য হয়।
কেন JSON ফর্ম্যাটিং গুরুত্বপূর্ণ?
সঠিক JSON ফর্ম্যাটিং পঠনযোগ্যতা উন্নত করে এবং ডেভেলপারদের দ্রুত ডেটার গঠন এবং বিষয়বস্তু বুঝতে সাহায্য করে।
কি JSON.stringify পদ্ধতি?
দ্য JSON.stringify পদ্ধতি একটি জাভাস্ক্রিপ্ট অবজেক্টকে JSON স্ট্রিংয়ে রূপান্তর করে।
কিভাবে করে JSON.stringify সুন্দর-মুদ্রণ সাহায্য?
পাশ করে JSON.stringify একটি তৃতীয় আর্গুমেন্ট (ইন্ডেন্টেশন লেভেল), আপনি ইন্ডেন্টেশন সহ JSON স্ট্রিং ফর্ম্যাট করতে পারেন।
Highlight.js কি?
Highlight.js হল সিনট্যাক্স হাইলাইট করার জন্য একটি লাইব্রেরি যা JSON ডেটা ফর্ম্যাট এবং হাইলাইট করতে ব্যবহার করা যেতে পারে।
আমি কি JSON ফর্ম্যাট করতে ব্রাউজার এক্সটেনশন ব্যবহার করতে পারি?
হ্যাঁ, JSONView বা JSON ফর্ম্যাটারের মতো এক্সটেনশনগুলি আপনার ব্রাউজারে স্বয়ংক্রিয়ভাবে JSON ফর্ম্যাট করতে পারে।
এর উদ্দেশ্য কি replace JSON বিন্যাসে পদ্ধতি?
দ্য replace একটি নিয়মিত অভিব্যক্তি সহ পদ্ধতি বিভিন্ন JSON উপাদানে রঙ কোডিং যোগ করতে ব্যবহার করা যেতে পারে।
প্রিটি-প্রিন্টিং JSON-এর জন্য একটি সাধারণ ব্যবহারের ক্ষেত্রে কি?
প্রিটি-প্রিন্টিং JSON সাধারণত ডিবাগ করার সময় বা অ-প্রযুক্তিগত স্টেকহোল্ডারদের কাছে JSON ডেটা উপস্থাপন করার সময় ব্যবহৃত হয়।
আমি কিভাবে Node.js এ JSON প্রিন্ট করতে পারি?
আপনি Node.js এ একটি HTTP সার্ভার তৈরি করতে পারেন এবং ব্যবহার করতে পারেন JSON.stringify JSON প্রতিক্রিয়া ফর্ম্যাট করতে।

JSON বিন্যাস সম্পর্কে চূড়ান্ত চিন্তা

ডেটার পঠনযোগ্যতা এবং ব্যবহারযোগ্যতা উন্নত করার জন্য সুন্দর-মুদ্রণ JSON অপরিহার্য। জাভাস্ক্রিপ্ট ব্যবহার করে, ডেভেলপাররা JSONকে আরও মানব-বান্ধব করতে ইন্ডেন্টেশন, হোয়াইটস্পেস এবং কালার কোডিং প্রয়োগ করতে পারে। অতিরিক্তভাবে, ব্রাউজার এক্সটেনশন এবং সিনট্যাক্স হাইলাইটিং লাইব্রেরিগুলিকে আরও ফর্ম্যাটিং উন্নত করতে পারে। এই কৌশলগুলি সম্মিলিতভাবে JSON ডেটার আরও ভাল ডিবাগিং এবং উপস্থাপনে সহায়তা করে, ডেটা পরিচালনায় স্পষ্টতা এবং দক্ষতা নিশ্চিত করে।

জাভাস্ক্রিপ্টে মানুষের পঠনযোগ্যতার জন্য JSON ফর্ম্যাটিং