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

في هذه العارضة الخاصة بالمطورين سنتعرف في كل مرة عن كيفية إستخدام الصيغ الإفتراضية في كود جافا سكريبت  مثل إستدعاء عنصر عنوان الصفحة   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 بالطريقة الآتية
• قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع   كود.js

js
<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
    if (typeof _WidgetManager === "undefined") return;
    var data = _WidgetManager._GetAllData();
//Do something with `data` here
}, false);
//]]>
</script>

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



js
<script type='text/javascript'>
//<![CDATA[
var data = _WidgetManager._GetAllData();
//]]>
</script>

ملاحظة:

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

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

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

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

js
<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
    if (typeof _WidgetManager === "undefined") return;
    var data = _WidgetManager._GetAllData();
    console.log(data);
//Do something with `data` here
}, false);
//]]>
</script>

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



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

طريقة العمل

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


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




• كذلك من خلال النقر بزر الماوس الأيمن على الخاصية وانقر فوق 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}}))