كيفية إنشاء جدول من مصفوفة كائنات في جافا سكريبت

على صفحة ويب ، يمكن أن تقلل البيانات غير المحاذاة من قابلية القراءة وتخلق مشاكل للمشاهدين. لمعالجة مثل هذه المواقف ، يمكنك استخدام الجداول لفرز البيانات بطريقة أفضل. توفر الجداول تنسيقًا رائعًا لمحاذاة البيانات وتحسين إمكانية القراءة والرؤية. حيث يمكن إنشاء جداول باستخدام لغة ترميز النص التشعبي (HTML) ، والتي يمكن ربطها بجافا سكريبت.

سيشرح هذا المنشور الإجراء الخاص بتكوين جدول بمجموعة من الكائنات في JavaScript.

كيفية إنشاء جدول من مصفوفة كائنات في جافا سكريبت؟

لإنشاء جدول من مصفوفة كائنات ، سنستخدم الطرق التالية:

سلسلة جدول HTML
طريقة الخريطة ()

دعونا نستكشف كل طريقة واحدة تلو الأخرى!

الطريقة الأولى: إنشاء جدول من صفيف كائنات باستخدام سلسلة جدول HTML في JavaScript

في JavaScript ، فإن الغرض من ' سلسلة 'لتخزين نص أو أرقام أو رموز خاصة. يتم تعريف السلاسل بإغلاق حرف أو مجموعة من الأحرف بين علامتي اقتباس مزدوجتين أو مفردتين. وبشكل أكثر تحديدًا ، يتم استخدامها أيضًا لإنشاء الجداول.

لنأخذ مثالاً للحصول على مفهوم واضح حول إنشاء جدول من مصفوفة كائنات باستخدام سلسلة Table.

مثال

في مثالنا ، سوف نستخدم '

'علامة بمعرف' وعاء 'ووضعه ضمن علامة لملف HTML الخاص بنا:

< معرف شعبة = 'وعاء' > شعبة >

دعونا نعلن ' مجموعة مصفوفة 'وتعيين بعض القيم إليه:

كانت مجموعة = [ 'علامة' و 'عصفور' و 'سمك' و 'البرتقالي' ] ؛

تهيئة متغير ' الطاولة 'لتخزين سلسلة جدول HTML:

جدول فار = '' ؛

حدد خليتين في كل صف بتعيين القيمة ' اثنين ' التابع ' الخلايا ' عامل:

كل خلية = اثنين ؛

بعد ذلك ، استخدم ' array.for each () ”لتمرير كل عنصر من عناصر المصفوفة من الوظيفة. ثم ، اضبط ' {القيمة} 'بمعرف' $ ' في حدود '

' ؛
} } ) ؛
قم بتعيين علامات إغلاق الجدول إلى المتغير ' الطاولة ' باستخدام ' + = ' المشغل أو العامل. بعد ذلك ، اربط محتوى الجدول بالحاوية التي تم إنشاؤها باستخدام الحاوية الخاصة به. لذلك ، استخدم ' الاستخفاف () 'وقم بتمرير المعرف إليه ووضع HTML الداخلي لتعيين القيم داخل جدول المتغير:
الطاولة + = '

' بطاقة شعار. بعد ذلك ، قم بتعريف المتغير ' أ 'لإضافة إلى زيادة الفهرس' أنا '، وتحديد' إذا 'بطريقة إذا كانت باقي قيم الخلايا والمتغير الذي تم إنشاؤه تساوي الصفر والقيمة' أ 'لا يساوي طول المصفوفة ، ثم اقتحام السطر أو الصف التالي من الجدول:

مجموعة مصفوفة. إلى عن على كل ( ( قيمة ، أنا ) => {
الطاولة + = ' < TD > $ { القيمة } TD > ' ؛
هناك = أنا + 1 ؛
إذا ( أ ٪ الخلايا == 0 && أ ! = مجموعة مصفوفة. الطول ) {
الطاولة + = '

' ؛

وثيقة. الاستخفاف ( 'وعاء' ) . داخلي لغة البرمجة = الطاولة ؛
في ملف CSS الخاص بنا و سنقوم بتطبيق بعض الخصائص على الجدول وخلايا البيانات الخاصة به. للقيام بذلك ، سنقوم بتعيين ' الحدود 'الملكية بالقيمة' 1 بكسل صلبة 'لتعيين الحد حول الجدول وخلاياه و' حشوة 'الملكية بالقيمة' 3 بكسل 'لإنشاء مساحة محددة حول محتوى العنصر ، وفقًا للحد المحدد:
الجدول ، TD {

الحدود : 1 بكسل صلبة ؛

حشوة : 3 بكسل ؛

}
احفظ الكود المحدد وافتح ملف HTML واعرض جدول كائنات المصفوفة:

دعنا نستكشف طريقة أخرى لإنشاء جدول من مصفوفة كائنات في جافا سكريبت.

الطريقة 2: إنشاء جدول من صفيف كائنات باستخدام طريقة map () في JavaScript

ال ' خريطة() 'يطبق التابع دالة محددة على كل عنصر من عناصر المصفوفة ، وفي المقابل ، يوفر مصفوفة جديدة. ومع ذلك ، لا تقوم هذه الطريقة بإجراء أي استبدالات في المصفوفة الأصلية. يمكنك أيضًا استخدام طريقة map () لتكوين جدول بمصفوفة من الكائنات.

مثال

دعونا ننشئ مصفوفة باستخدام ' يترك 'الكلمة الرئيسية. قم بتعيين بعض القيم لخصائص الكائن أو المفاتيح:
اسمحوا مجموعة = [
{ 'اسم' : 'علامة' و 'سن' : 'عشرين (20)' } و
{ 'اسم' : 'ماذا أنا' و 'سن' : 'ثلاثون (30)' } ]
قم بالوصول إلى الحاوية التي تم إنشاؤها بالفعل باستخدام طريقة () الاستخفاف واستخدم ' insertAdjacentHTML () طريقة 'لإضافة علامات الجدول:
وثيقة. الاستخفاف ( 'وعاء' ) . insertAdjacentHTML ( 'بعد نهاية' و

' < الطاولة > < آر > < العاشر >
استخدم ال ' Object.keys () 'للوصول إلى مفاتيح الكائن المحدد ثم استخدام' انضم() 'لوضعها كعناوين داخل' ' بطاقة شعار:
$ { هدف . مفاتيح ( مجموعة مصفوفة [ 0 ] ) . انضم ( '' ) }
بعد إضافة علامة إغلاق رأس الجدول وصف الجدول وعلامة فتح البيانات ، سنستخدم ' خريطة() 'طريقة لاستدعاء' Object.values () 'وظيفة لكل قيمة من مفاتيح الكائن ، ثم استخدم' انضم() 'لوضعها داخل صف والانتقال إلى المرحلة التالية:
العاشر > < آر > < TD > $ { مجموعة مصفوفة. خريطة ( و => هدف . القيم ( و )

. انضم ( '' ) ) . انضم ( ' ' ) } الطاولة > ' )
كما ترى ، لقد أنشأنا بنجاح جدولًا من مجموعة الكائنات المحددة:

لقد قمنا بتغطية الطرق الفعالة لإنشاء جدول من مجموعة من الكائنات في JavaScript.

استنتاج

في JavaScript ، لتشكيل جدول من مصفوفة من الكائنات ، فإن HTML ' الطاولة 'سلسلة أو' خريطة() يمكن استخدام طريقة ”. للقيام بذلك ، حدد علامة div بمعرف. بعد ذلك ، قم بتعريف مصفوفة الكائنات في كلتا الطريقتين ، وقم بتخزين علامات الجدول ضمن متغيرات ، أو قم بإعادتها مباشرةً إلى عنصر HTML متصل بالبيانات. ناقش هذا المنشور طريقة إنشاء جدول من مصفوفة كائنات باستخدام JavaScript.

كيفية إنشاء جدول من مصفوفة كائنات في جافا سكريبت