تنسيق بيانات JSON باستخدام جيت هاب وجافا سكريبت

المشكلة:

يواجه المستخدم مشكلة في تنسيق بيانات JSON حيث تأتي البيانات في تنسيق غير ملائم بالنسبة له. البيانات الأصلية تأتي بهذا الشكل:

"stations": {
    "st1": "station 1",
    "st2": "station 2",
    "st3": "Station 3",
}

السؤال:

كيف يمكن إعادة تنسيق البيانات لتصبح كالتالي:

"stations": [
  {
    "id": "st1",
    "name": "station 1",
  },
  {
    "id": "st2",
    "name": "station 2",
  },
  {
    "id": "st3",
    "name": "station 3",
  }
]

التجربة:

قام المستخدم بمحاولة لوغار البيانات لاختبارها أولاً، ولكنه واجه صعوبة في التنقل بين أزواج المفاتيح/القيم حيث إنها عبارة عن سلاسل نصية. هذه هي محاولته:

$.get('/js/ajax/tube-data.json', function (data) {

    $.each(data.stations, function () {
        // كان يتوقع رؤية st1، st2، st3 في وحدة التحكم
        // لكنه رأى الحرف الأول فقط من كل محطة
        console.log(this[0]) 
    });

}).error(function () { console.log(arguments) });

الحل:

لتنسيق البيانات بالطريقة المطلوبة، يمكن استخدام دالة Object.entries() للتكرار عبر أزواج المفاتيح والقيم في الكائن، ومن ثم إعادة بناء البيانات بالشكل المرغوب. فيما يلي مثال على كيفية تحقيق ذلك:

javascriptCopy code
$.get('/js/ajax/tube-data.json', function (data) {
    var formattedStations = [];

    Object.entries(data.stations).forEach(function ([id, name]) {
        formattedStations.push({
            "id": id,
            "name": name,
        });
    });

    var formattedData = {
        "stations": formattedStations
    };

    console.log(formattedData);

}).error(function () { console.log(arguments) });

باستخدام Object.entries()، يمكن الآن الوصول إلى كل محطة بشكل فعّال وإعادة بناء البيانات بالتنسيق المطلوب.

التفاصيل الإضافية:

في محاولته لتنسيق البيانات، قام المستخدم بتحميل البيانات من ملف JSON باستخدام $.get() في جيت هاب. تحتوي البيانات الأصلية على كائن يحتوي على مفاتيح تمثل محطات المترو مع القيم المتعلقة بها. واجه المستخدم صعوبة في فهم كيفية التعامل مع هذه البيانات بسبب تنسيقها غير الملائم.

أظهرت المحاولة الأولى للمستخدم أنه حاول استخدام $.each() لتكرار مفاتيح الكائن، ولكن واجه تحديًا في استخدامها بشكل صحيح. اكتشف أنه عندما قام بتسجيل البيانات في وحدة التحكم، كان يحصل على الحرف الأول فقط من كل اسم محطة بدلاً من الاسم كاملاً.

تم تقديم حلاً للمستخدم يستخدم Object.entries() لتحويل كائن المحطات إلى مصفوفة من أزواج المفاتيح والقيم. ثم قام ببناء بيانات جديدة بتنسيق مخصص مستخدمًا دالة forEach() لإعادة ترتيب البيانات بالشكل المطلوب.

هذا الحل يظهر الفهم الجيد للمستخدم للأدوات المستخدمة في جافا سكريبت وجيت هاب، وكيفية التلاعب بالبيانات بشكل فعّال لتحقيق الهدف المرجو.