Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

تجزیه و تحلیل یک فایل csv به وسیله ی جاوا اسکریپت

by
Difficulty:IntermediateLength:ShortLanguages:

Persian (پارسی) translation by Amirabbas Asadi (you can also view the original English article)

Final product image
What You'll Be Creating

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

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

ساخت یک فایل CSV

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

Initial-CSV-File

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

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

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

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

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

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

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

CSV-Representation

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

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

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

Notepad++-EOL

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

CSV-EOL

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

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

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

Generated-Table

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.