إظهار HN: لقد قمت بإنشاء مكتبة JavaScript خفيفة الوزن لتصور JSON كرسم بياني

تصور هياكل JSON بسهولة كمخططات شجرة تفاعلية وديناميكية.”https://jsontr.ee/” rel=”nofollow”> انظر المثال

“-1” دير=”auto”> الوصف:

jsontr.ee هي مكتبة JavaScript خفيفة الوزن تعمل على تحويل بيانات JSON إلى مخططات شجرية تفاعلية معروضة بشكل جميل باستخدام SVG. تم تصميمه من أجل البساطة والمرونة، وهو يدعم كلاً من المصفوفات والكائنات المتداخلة، مما يضمن تصورات واضحة وبديهية لهياكل البيانات المعقدة.

“-1” دير=”auto”> الميزات:

• يقوم تلقائيًا بإنشاء مخططات شجرة من بيانات JSON.
• مواضع العقد ديناميكيًا لتجنب التداخلات.
• يدعم المصفوفات والكائنات المتداخلة ذات العقد الأصلية ذات العلامات.
• عرض تفاعلي قائم على SVG مع أنماط قابلة للتخصيص.
• خفيف الوزن وسهل الاندماج في أي مشروع ويب.

“-1” دير=”auto”>مثالي لـ:

• تصحيح أخطاء هياكل JSON.
• تصور استجابات API.
• تمثيل البيانات الهرمية.

“-1” دير=”auto”> كيفية الاستخدام

للبدء، قم بتضمين مكتبة jsontr.ee في ملف HTML الخاص بك:

<البرنامج النصي="http://github.com/path/to/jsontr.ee.js">

الاستخدام الأساسي

1. قم بإعداد بيانات JSON الخاصة بك: تأكد من أن بيانات JSON الخاصة بك جاهزة. على سبيل المثال: جافا سكريبت

const jsonData={    "name": "Lou Alcalá",    "projects":[{            "name": "JSONtr.ee",            "description": "JSON Formatter, Validator & Viewer Online | JSONtr.ee",            "url": "https://jsontr.ee"        }، {            "name": "PixSpeed.com",            "description": "Image compressor | Compress and optimize WebP, PNG, JPG, JPeG and AVIF",            "url": "https://pixspeed.com"        } ]};

2. إنشاء حاوية للمخطط: أضف أ

   عنصر في HTML الخاص بك حيث سيتم عرض الرسم التخطيطي.

“>

<معرف القسم="json-tree"><ديف>

const container=document.getElementById('json-tree');container.innerHTML=generateJSONTree(jsonData);