الاستعلام عن مستند JSON لكائن WidgetManager

الأربعاء، 13 نوفمبر 2019

اقرأ ايضا

في هذه العارضة الخاصة بالمطورين سنتعرف في كل مرة عن كيفية إستخدام الصيغ الإفتراضية في كود جافا سكريبت مثل إستدعاء عنصر عنوان الصفحة blog.title أو عنصر علامة شرطية view.isSingleItem .
بل ويمكننا تطبيق أكثر من ذلك بخلاف إسترجاع البيانات وذلك فقط حين نصل إلى مستند مدير القطعة الإفتراضي Widget Manager والذي تستطيع أن تسميه الملف المصدر لخصائص وبيانات مدونتك.

مضمون الوثيقة

الاستعلام عن مستند JSON المستهدف أو استخراج البيانات أو تحديد أقسام فرعية أو اختبار استعلام بسرعة ستشرح هذه المقالة كيفية القيام بذلك باستخدام أدوات Chrome Developer
أي ما سنقوم به كخطوة أولية في هذه التدوينة هو كيف نقوم بإستدعاء وفحص ملف JSON كائن المستند WidgetManager لنصل بعدها إلى الكائنات المتداخلة والمصفوفات وإستكشاف القيم كالحالة والوصف والبيانات..لتوضيفها مستقبلا في مشاريعنا البرمجية

سجل وحدة التحكم

في مخرجات سجل وحدة التحكم حين نستدعي مدير القطعة الافتراضي لمدونتك أقصر تفسير ممكن هو حين نقوم بتحليل ملف الـ XML سيتم طبع تمثيل JSON للكائن المحدد و تقديم الإخراج كقائمة منسدلة ومتسلسلة هرميا مع مثلثات الكشف التي تتيح لك رؤية وإستكشاف محتويات الكائنات التابعة والتي هي عبارة عن صفيف يحوي القيم المخزنة القابلة للقراءة ..أنظر الصورة التالية.

الخطوات

عمليا من خلال الـ _WidgetManager نقوم باخذ نسخه مخزنة كاملة من ملف Widget Manager عن طريق الداله _GetAllData التى تقوم بانشاء كائن من ملف الـ XML الذى يمكننا من الوصول إلى عنصر واجهة المستخدم في المصانع.

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى - واجهة المستخدم

قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر ~~dashboard~~
إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير Edit HTML
إضغط في وسط محرر الأكواد ثم F + Ctrl لإضهار مربع البحث
بإستعمال الزر C +Ctrl للنسخ و V +Ctrl للصق قم بوضع الأكواد في المكان المناسب

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية - إستيراد Widget Manager

لكي نستطيع الوصول للبيانات يجب إستيراد كامل لمستند Widget Manager بالطريقة الآتية
قم بالبحث عن هذا الوسم فوقه أي قبله قم بوضع كود.js

js

تستطيع كذلك إستخدام فقط سطر المتغير ونضعه في بداية الشفرة الخاصة بنا

js

توضيح

طريقة إستيراد مستند WidgetManager مهمة جدا بحيث ستساعدك في إستخدام صيغ البيانات الخاصة ببلوجر على جافا سكريبت والتي سنشرح في تدوينات أخرى طريقة الوصول إلى كل عنصر واجهة مستخدم مخصص..والآن بعد تثبيت النص البرمجي يمكنك الإطلاع على الهدف في مخرجات سجل وحدة التحكم بالشكل الآتي..

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثالثة - مخرجات Console

من خلال إضافة console.log(data); للنص البرمجي الخاص بنا سيتم طبع تمثيل JSON للكائن WidgetManager

js

أخيرا قم بحفظ القالب ثم قم بعرض مدونتك ثم إضغط باليمين الماوس وإختر فحص العنصر inspect ثم إنتقل إلى تبويب Console

إستخدم إختصارات أدوات مطوري Chrome

`Alt` +`Ctrl` +النقر على السهم	لتوسيع العقدة وجميع محتوياتها
`F` +`Ctrl`	لفتح مربع البحث ، أدخل المصطلح للبحث في JSON

إستخدم خيارات أدوات مطوري Chrome

خيار `Store as Global Variable`

انقر بزر الماوس الأيمن على كائن JSON وحدد الخيار " Store as Global Variable " الذي سينشأ tempX متغير حيث X سيكون عددًا صحيحًا (temp1 و temp2 وما إلى ذلك).

خيار `Copy property path`

انقر بزر الماوس الأيمن على الخاصية وانقر فوق " Copy property path " ثم للتحقق ، فتح وحدة التحكم ، اكتب متغير temp ولصق مسار الخاصية ، يجب أن تحصل على النتيجة المتوقعة.
افترض أن المتغير العام هو "temp1" وأن مسار الخاصية المنسوخة هو "name" ، نكتب temp1.name ليُرجع النتيجة المتوقعة .

js
temp1[0].name

رمز لاستخراج البيانات في وحدة التحكم

تدعم أدوات المطور في Chrome وظائف سهم ES6 ، لذا سنستخدمها مع وظيفة خريطة الصفيف للحصول على قائمة بجميع الأسماء

js
temp1.map(function(i) {return i.name; })

js
temp1.map((i) => { return i.name})

js
temp1.map(i => i.name)

رمز لعرض البيانات في جدول

دعونا نختار مثالين إسم ووصف أو إستخراج جميع البيانات ونجعلهم في جدول بإستخدام الرمز

js
console.table(temp1.map((i) => { return { name : i.name, Message : i.shareMessage}}))

js
console.table(temp1.map((i) => { return { name : i.name, key : i.key, Message : i.shareMessage, target : i.target}}))

تجريـــــــــــــبي

الأربعاء، 13 نوفمبر 2019