DevToolPal
ع

تحويل JSON إلى جدول HTML

حوّل مصفوفة كائنات JSON إلى جدول HTML، مع تسطيح الحقول المتداخلة إلى أعمدة بأسماء منقوطة.

يعمل محليًا، دون أي رفع

الخيارات

الإدخال

0 حرف · 0 B

المخرجات

0 حرف · 0 B

ماذا تفعل الأداة

تحوّل هذه الأداة بيانات JSON، وهي عادةً استجابة API أو ملف مُصدَّر، إلى جدول HTML. يصبح كل كائن صفًا ويصبح كل مفتاح عمودًا. وتُسطَّح الكائنات المتداخلة إلى أسماء أعمدة بالنقاط ليبقى الجدول ثنائي الأبعاد.

طريقة الاستخدام

  1. الصق JSON في مربع الإدخال، أو ارفع ملف .json، أو انقر مثال.
  2. يظهر كود الجدول على اليسار أثناء الكتابة. ويُبلَّغ عن JSON غير الصالح مع موضع الخطأ.
  3. أوقف تضمين صف الترويسة إذا أردت صفوف البيانات فقط.
  4. انسخ HTML أو نزّله كملف .html.

مثال

[
  { "name": "Alice", "address": { "city": "Shanghai" }, "tags": ["admin", "editor"] },
  { "name": "Bob", "address": { "city": "Beijing" } }
]

يعطي جدولًا بالأعمدة name وaddress.city وtags. تحتوي خلية tags لـ Alice على admin; editor وخلية Bob فارغة.

نصائح

  • لعرض استجابة API، الصق الاستجابة كاملة. إذا كانت على شكل {"items": [...]}، تُؤخذ الصفوف من items تلقائيًا.
  • استخدم منسّق JSON أولًا إذا أردت فحص JSON أو إصلاحه قبل تحويله.

الأسئلة الشائعة

› ما بنية JSON التي تتوقعها الأداة؟

أفضل ما يعمل هو مصفوفة كائنات، كائن لكل صف. كما يُفهم الكائن الذي يحتوي على خاصية مصفوفة واحدة، مثل {"data": [...]}. وأي قيمة أخرى تصبح صفًا واحدًا.

› كيف تُعالج الكائنات والمصفوفات المتداخلة؟

تصبح الحقول المتداخلة أسماء أعمدة بالنقاط، مثل address.city. وتُضم مصفوفات القيم البسيطة بـ "; "، وتحصل مصفوفات الكائنات على مسارات بالفهرس مثل items.0.name.

› ماذا لو كانت للكائنات مفاتيح مختلفة؟

الأعمدة هي اتحاد كل المفاتيح بترتيب ظهورها الأول. وتُترك القيم الناقصة فارغة.

› هل المخرجات آمنة لوضعها في صفحة ويب؟

نعم. يُهرَّب النص بصيغة HTML، فتُعرض قيم مثل <script> كنص.