JSON ট্রি ভিউয়ার

JSON ট্রি ভিউয়ার কী?#

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

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

এই পৃষ্ঠাটি আপনার ব্রাউজারে JSON পার্স করে এবং নোডে নোড একটি সংকোচনযোগ্য ট্রি রেন্ডার করে, ইনপুটকে HTML হিসেবে ব্যাখ্যা না করে সরল টেক্সট কন্টেন্ট ব্যবহার করে — তাই <script> ট্যাগ বা HTML-সদৃশ স্ট্রিং ধারণকারী একটি নথিও নিষ্ক্রিয় দেখানো হয়, সম্পাদিত হয় না।

ব্যবহারবিধি#

1. বাঁদিকের ইনপুট পেইনে আপনার JSON পেস্ট করুন। টাইপ করার সাথে সাথেই পার্সিং হয়।
2. ডানদিকে ট্রি উপস্থিত হয়। প্রতিটি অবজেক্ট বা অ্যারে একটি ▼ টগল, তার শুরুর বন্ধনী ({ বা [), ভেতরের এন্ট্রির সংখ্যা, এবং তার ক্লোজিং বন্ধনী দেখায়। ওই শাখাটি ভাঁজ বা খোলার জন্য টগল — অথবা বন্ধনীগুলো নিজেই — ক্লিক করুন।
3. প্রতিটি শাখাকে তার লিফ পর্যন্ত খুলতে সব প্রসারণ ব্যবহার করুন, এবং পুরো নথিকে শুধু রুটে সংকুচিত করতে সব সংকুচিত করুন। সংকুচিত করার মাধ্যমেই আপনি ভেতরে ডুব দেওয়ার আগে একটি বিস্তৃত পেলোডের এক সারির ওভারভিউ পেতে পারেন।
4. ডানদিকের হেডারটি রুটের শীর্ষ-স্তরের এন্ট্রির একটি গণনা দেখায় (যেমন 5 items), যাতে আপনি এক নজরে বুঝতে পারেন নথিটি কত বড়।
5. নমুনা একটি নেস্টেড প্রদর্শন নথি লোড করে; মুছুন উভয় পেইন খালি করে দেয়।

মূল বৈশিষ্ট্য#

• যেকোনো শাখা স্বাধীনভাবে ভাঁজ করুন। প্রতিটি কন্টেইনার নিজে নিজে খোলে ও বন্ধ হয়, তাই আপনি রেফারেন্সের জন্য একটি সাব-অবজেক্ট প্রসারিত রাখতে পারেন এবং বাকিগুলো সংকুচিত রাখতে পারেন।
• গভীরতা গাইড। চাইল্ডগুলো একটি উল্লম্ব গাইড লাইনের অধীনে ইনডেন্ট করা, যা ঘন নথিতেও একটি এন্ট্রি কোন বন্ধনীর অন্তর্ভুক্ত তা স্পষ্ট করে তোলে।
• XSS-নিরাপদ রেন্ডারিং। প্রতিটি লেবেল ও মান সরল টেক্সট কন্টেন্ট হিসেবে লেখা হয় — ইনপুট কখনো HTML হিসেবে পার্স করা হয় না। একটি ক্ষতিকারক-দেখানো স্ট্রিং সহজেই টেক্সট হিসেবে প্রদর্শিত হয়।
• বিশ্বস্ত লিফ মান। স্ট্রিং তাদের চারপাশের উদ্ধৃতি ধরে রাখে এবং সংখ্যাগুলো ঠিক যেমন JSON.stringify লিখত, তেমনভাবে রেন্ডার হয়, তাই true (বুলিয়ান) দৃশ্যত "true" (স্ট্রিং) থেকে আলাদা।
• লাইভ গণনা। হেডার রিপোর্ট করে রুট কতগুলো এন্ট্রি ধারণ করে, আপনি এডিট করার সাথে সাথে আপডেট হয়।

ব্যবহারিক উদাহরণ#

নমুনা লোড করুন এবং পার্স করা ট্রিতে পাঁচটি শীর্ষ-স্তরের এন্ট্রি সহ একটি রুট অবজেক্ট দেখায়:

▼ { 5
    "name": "ArpGate DevTools"
    "version": 1
    "active": true
  ▼ "tags": [ 3 ]
  ▼ "features": { 2 }

এর মধ্যে দুটি এন্ট্রি নিজেরাই কন্টেইনার। tags খুললে তিন-উপাদানের অ্যারে ("json", "encoding", "crypto") দেখায়, এবং features খুললে প্রকাশ পায় যে static হলো true যখন backend হলো null — একটি পার্থক্য যা ট্রি স্পষ্টভাবে রেন্ডার করে, সাধারণ ডাম্প থেকে অনুমান করতে ছেড়ে না দিয়ে।

আপনার যদি শুধু features সাব-অবজেক্টটি গুরুত্বপূর্ণ হয়, শীর্ষ স্তরের অন্য প্রতিটি ▼ ক্লিক করে সেগুলোকে ভাঁজ করে দিন। রুটের 5 গণনাটি নির্ভুল থাকে, এবং গভীরতা গাইড এটি স্পষ্ট করে তোলে যে static এবং backend হলো features-এর অন্তর্ভুক্ত, রুটের নয়।

প্রশ্নোত্তর#

এটি কি আমার JSON পরিবর্তন বা পুনরায় ফরম্যাট করে?#

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

ট্রিতে স্ট্রিংগুলোর এখনও কেন উদ্ধৃতি আছে?#

কারণ JSON নিজেই এভাবে একটি স্ট্রিংকে একটি খালি কীওয়ার্ড থেকে আলাদা করে। উদ্ধৃতি না থাকলে true এবং "true" একই রকম দেখাত, এবং null ও "null" স্ট্রিংটিও। উদ্ধৃতি ধরে রাখা (ঠিক যেমন JSON.stringify তৈরি করে) এক নজরেই সেই পার্থক্য বজায় রাখে।

এটি অনেক বড় নথি কীভাবে সামলায়?#

পার্সিং ও রেন্ডারিং সম্পূর্ণভাবে আপনার ব্রাউজারে ঘটে, তাই কোনো আপলোড বা সার্ভার রাউন্ড-ট্রিপ নেই। সাধারণ কনফিগ ও API প্রতিক্রিয়ার জন্য এটি তাৎক্ষণিক। মাল্টি-মেগাবাইট নথির জন্য ট্রিকে প্রতিটি মানের জন্য একটি নোড তৈরি করতে হয়, যা ধীরগতির হতে পারে — আপনার প্রয়োজন নেই এমন শাখাগুলো ভাঁজ করে দৃশ্যমান নোড সংখ্যা পরিচালনাযোগ্য রাখুন।

HTML ধারণকারী একটি স্ট্রিং কি HTML হিসেবে রেন্ডার হবে?#

কখনোই না। টুলটি প্রতিটি মান টেক্সট কন্টেন্ট হিসেবে লেখে, যা ব্রাউজার নিষ্ক্রিয় অক্ষর হিসেবে বিবেচনা করে। এমন একটি স্ট্রিং যা <script> বা <img onerror=...> ধারণ করে তা আক্ষরিকভাবে টেক্সট হিসেবে দেখানো হয় — এটি মার্কআপ হিসেবে পার্স করা হয় না এবং চালানো পারে না।