تحليل ملفات CSV بواسطة جافاسكريبت

22 أغسطس 2017

يشيع استخدام صيغة Comma-separated values) CSV؛ قيم معزولة بفاصلة) لتخزين بيانات مُجدوَلة مثل تلك المصدَّرة من قاعدة بيانات أو ورقة حسابات. تمكن قراءة المستندات باستخدام واجهة FileReader البرمجية HTML، دون الحاجة للتخاطب مع أي خادوم Server أو سند خلفي Backend.
سنرى في هذا الدّرس كيفيّة قراءة ملفات CSV في صفحة وِب باستخدام JavaScript وذلك بالاعتماد على محلّل Parser يتخاطب مع واجهة FileReader، هذا المحلّل هو Papa Parse.
يتطلّب هذا الدرس معرفة جيّدة بجافاسكريبت ومكتبة jQuery.

لماذا نستخدم Papa Parse

يدعم محلّل Papa Parse المتصفحات الحديثة وبه الكثير من الميزات:

مفتوح المصدر، مجاني وتُضاف إليه ميزات جديدة باستمرار؛
سريع، يمكنه تحليل ملايين البيانات ويدعم التشعّب التعدّدي Multi-threading؛
لا يعتمد على مكتبات خارجية؛
يدعم ترميزات Encoding مختلفة؛
يمكنه تخطّي التعليقات
يتجنّب انهيار المتصفّح باستخدام التدفقات Streams للحصول على البيانات الخام.

نهدف في هذا الدرس إلى قراءة البيانات من ملفّ CSV يحمّله الزائر عن طريق المتصفّح، نحلّل هذه البيانات ثم نعرضها في جدول HTML. يمكنك بعد ذلك استخدام التخزين المحلّي Local storage لديمومة البيانات أو إرسالها إلى خادوم لتخزينها في قاعدة بيانات.

توجد الشفرة الكاملة لهذا الدرس في الملف المرفق. سنشرح في الفقرات الموالية أهم الخطوات.

تهيئة استمارة HTML

الخطوة الأولى هي كتابة شفرة HTML المسؤولة عن الاستمارة Form التي سيُحمّل المستخدم عن طريقها ملف CSV.

<form class="form-inline">
<div class="form-group">
  <label for="files">Upload a CSV formatted file:</label>
  <input type="file" id="files"  class="form-control" accept=".csv" required />
</div>
<div class="form-group">
 <button type="submit" id="submit" class="btn btn-primary">Submit</button>
 </div>
</form>

جعلنا حقل الإدخال Input مطلوبًا كما يظهر في الشفرة أعلاه required، كما أنه لا يقبل سوى الملفات بصيغة CSV:

accept=".csv"

استقبال البيانات وتحليلها

يُحدَّد ملف CSV في حقل الإدخال عندما ينقر المستخدم على الزّر “إرسال”. نستخدم jQuey - عند النقر على زرّ الإرسال - لتحليل الملف الذي حمّله المستخدم:

$('#submit').on("click",function(e){
    e.preventDefault();

    $('#files').parse({
        config: {
            delimiter: "auto",
            complete: buildTable,
        },
        before: function(file, inputElem)
        {
            //console.log("Parsing file...", file);
        },
        error: function(err, file)
        {
            //console.log("ERROR:", err, file);
        },
        complete: function()
        {
            //console.log("Done with all files");
        }
    });
});

الشفرة كما يظهر بسيطة. نبدأ أولا بضبط بعض المعطيات Parameters التي يحتاجها Papa parse باستخدام الكائن config.

يتوفّر Papa parse أيضا على توابع لدورة حياة الملف يمكن استخدامها إن اقتضت الضرورة:

before: دالة تُنفَّذ قبل بدء تحليل الملف.
error: دالة تُنفَّذ عند وجود خطأ في تحليل الملف.
complete: دالة تُنفَّذ بعد اكتمال تحليل الملف. لا تتلقّى هذه الدالة أية بيانات، وبالتالي يجب استخدام الدالة في المعطى complete إن كنت تريد معالجة البيانات التي تحصّل عليها المحلّل، وهو ما سنفعله.

تتضمّن معطيات الكائن config المذكور أعلاه:

المحرف المستخدَم للفصل بين القيم delimiter الذي ضبطناه على القيمة auto لكي يستكشف المحلّل تلقائيًا المحرف المستخدم.
دالة تُنفَّذ بعد اكتمال تحليل الملف يحدّدها المعطى complete في الكائن config. أعطينا القيمة buildTable لهذا المعطى، وهو اسم دالة سنعرّفها لاحقا.

تستقبل الدالة buildTable نتيجة تحليل الملف في أول معطى (results)، وهو كائن يأخذ الهيكلة التاليّة:

{
    data:   // مصفوفة بالبيانات بعد التحليل
    errors: // مصفوفة بالأخطاء التي قد تكون حصلت أثناء تحليل الملف
    meta:   // كائن يتضمّن معلومات إضافية
}

تستقبل الدالة buildTable الكائن results وتستخدم البيانات results.data لإنشاء جدول تعرضه في صفحة الوب:

function buildTable(results){
    var markup = "<table class='table'>";
    var data = results.data;

    for(i=0;i<data.length;i++){
        markup+= "<tr>";
        var row = data[i];
        var cells = row.join(",").split(",");

        for(j=0;j<cells.length;j++){
            markup+= "<td>";
            markup+= cells[j];
            markup+= "</th>";
        }
        markup+= "</tr>";
    }
    markup+= "</table>";
    $("#app").html(markup);
}