فرمت csv(مقادیر جدا شده به وسیله کاما) یک روش محبوب برای تبادل داده بین برنامه ها است.

در این آموزش، یاد خواهیم گرفت که جاوا اسکریپت چگونه می تواند به ما در نمایش و تجزیه و تحلیل داده های یک فایل csv کمک کند.

ساخت یک فایل CSV

برای شروع، بیاید یک فایل CSV ساده درست کنیم. برای انجام این کار، از Mockaroo، یک تولید کننده آنلاین داده های آزمایشی استفاده می کنیم. فایل ما این جاست:

تبدیل یک فایل CSV به یک جدول HTML

حالا که فایل را تولید کردیم، آماده هستیم اونو تجزیه و تحلیل کنیم و براش یک جدول HTML بسازیم.

به عنوان قدم اول، از تابع ajax جی کوئری برای دریافت داده ها از این فایل استفاده می کنیم.

    $.ajax({
        url: 'csv_data.csv',
        dataType: 'text',
      }).done(successFunction);

با فرض موفق بودن درخواست ایجکس، successFunction اجرا می شود. این تابع مسئول تجزیه و تحلیل داده های دریافتی و تبدیل آن ها به یک جدول HTML است.

	  function successFunction(data) {
        var allRows = data.split(/\r?\n|\r/);
        var table = '<table>';
        for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
          if (singleRow === 0) {
            table += '<thead>';
            table += '<tr>';
          } else {
            table += '<tr>';
          }
          var rowCells = allRows[singleRow].split(',');
          for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
            if (singleRow === 0) {
              table += '<th>';
              table += rowCells[rowCell];
              table += '</th>';
            } else {
              table += '<td>';
              table += rowCells[rowCell];
              table += '</td>';
            }
          }
          if (singleRow === 0) {
            table += '</tr>';
            table += '</thead>';
            table += '<tbody>';
          } else {
            table += '</tr>';
          }
        } 
        table += '</tbody>';
        table += '</table>';
        $('body').append(table);
      }

خب، ایده ما اینه که هر ردیف از فایل CSV رو به یک ردیف جدول تبدیل کنیم. با در نظر داشتن این، به طور خلاصه عملکرد کد فوق را توضیح می دهیم:

• اول، از یک regex برای جدا کردن پاسخ ajax استفاده می کنیم و ردیف های CSV را جدا می کنیم.
• سپس، عمل جدا کردن داده ها را روی ردیف های CSV تکرار می کنیم.
• در آخر، حلقه ای بر روی داده ها اجرا کرده و سلول های جدول متناظر با هر یک را می سازیم.

همچنین، برای داشتن یک فهم بهتر از کد روند ذیل را در نظر گرفته و تجسم کنید:

در اینجا لازمه توضیح بدیم که چرا از عبارت /\r?\n|\r/ برای جدا کردن ردیف های CSV استفاده کردیم.

همانطوری که شاید بدانید یک خط جدید نمایش متفاوتی در سیستم های عامل دارد. برای مثال، در پلتفرم ویندوز کاراکتر نمایش دهنده یک خط جدید \r\n است. این بدان معناست، که با استفاده از regex فوق، ما قادر به تشخیص همه ی شکل های نمایش هستیم.

به علاوه، اکثر ویرایشگر ها به ما اجازه میدهند که فرمت یک خط جدید را انتخاب کنیم. برای مثال Notepad++ را در نظر بگیرید. در این ویرایشگر، ما می توانیم فرمت دلخواه برای یک سند را از این راه تعیین کنیم :

برای تجسم این، فایلمون رو در نظر بگیرید. بر اساس فرمت انتخابی ما ، اون باید به صورت زیر باشه:

افزودن استایل به جدول HTML

قبل از اینکه جدول نتیجه رو ببینیم بیاید کمی استایل ساده به اون اضافه کنیم:

	  table {
        margin: 0 auto;
        text-align: center;
        border-collapse: collapse;
        border: 1px solid #d4d4d4;
      }
    
      tr:nth-child(even) {
        background: #d4d4d4;
      }
    
      th, td {
        padding: 10px 30px;
      }
    
      th {
        border-bottom: 1px solid #d4d4d4;
      }     

این جدول تولید شده ما است:

جمع بندی و نتیجه گیری

در این مقاله کوتاه، ما عمل پردازش تبدیل یک فایل CSV به یک جدول HTML را انجام دادیم. البته، ما می توانستیم از یک ابزار web based برای این کار استفاده کنیم، با این حال من فکر می کنم اینکه این برنامه رو با کد خودتون بنویسید همیشه چالش بر انگیز تره.