Создать таблицу из CSV-файла

Создайте таблицу из CSV-файла с помощью papaparse js, javascript и Bootstrap 5.0.

Что такое Папапарсе?

Papaparse — это библиотека Javascript для анализа строки csv или файла csv.

Он претендует на звание самого быстрого парсера JavaScript csv для браузера, на официальном сайте мы можем прочитать, что он способен управлять файлами размером в гигабайты.

Он также предлагает ряд функций, облегчающих разработку, например, он может автоматически определять разделитель, плюс легко указать наличие строки заголовка, и, кроме того, легко убедиться, что при загрузке больших файлов script управляется другим потоком, отличным от того, который управляет страницей, поэтому последний не будет заблокирован.

Вот ссылка на официальный сайт Papaparse: Papa Parse — Powerful CSV Parser for JavaScript

Csv, который мы будем использовать

В этом уроке мы будем использовать следующий csv:

Restaurant, Cheese, Mushrooms, Size by Inch, Extra Spicy, Price (€)
A, yes, yes, 12, no, 6
B, no, yes, 15, yes, 8
C, no, no, 9, no, 5
D, yes, no, 12, yes, 7
E, yes, no, 12, yes, 7.5
F, no, yes, 15, yes, 9

Что мы будем строить

Мы создадим простую таблицу с начальной загрузкой 5 и ванильным javascript, которая отображает данные, поступающие из нашей строки csv.

Вывод будет выглядеть следующим образом:

Давайте начнем кодировать!

Первое, что нужно сделать, это импортировать библиотеки Papaparse и Bootstrap 5, для Bootstrap нам нужно только импортировать css

<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.1/papaparse.min.js" integrity="sha512-EbdJQSugx0nVWrtyK3JdQQ/03mS3Q1UiAhRtErbwl1YL/+e2hZdlIcSURxxh7WXHTzn83sjlh2rysACoJGfb6g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Второй шаг — создать загрузочную таблицу с идентификаторами заголовка и тела, чтобы позже мы могли использовать javascript для добавления в нее вложенных элементов (данных).

<table style="width: 90vw; margin: auto;" class="table"> 
    <thead> 
        <tr id="tableHeader"> 
        </tr> 
    </thead> 
    <tbody id="tableBody"> 
    </tbody> 
</table>

Теперь мы можем добавить код javascript, сначала мы создаем служебную функцию, которая добавляет ячейку заголовка или ячейку строки внутри таблицы.

function createDataElement(htmlTag, innerText, idParent) { 
    let node = document.createElement(htmlTag); 
    let textnode = document.createTextNode(innerText); 
    node.appendChild(textnode); 
    document.getElementById(idParent).appendChild(node); 
}

Эта функция будет использоваться в другой функции, создающей заголовки.

function createHeaderElement(columnText) { 
    createDataElement("th", columnText, "tableHeader"); 
}

И в той, что создает ряды

function createCellData(rowIndex, dataIndex, cellText) { 
    if(dataIndex === 0) { 
    let node = document.createElement("tr"); 
    node.setAttribute("id", "row" + rowIndex); 
    document.getElementById(“tableBody”).appendChild(node); 
 
    createDataElement("td", cellText, "row" + rowIndex); 
    } else { 
        createDataElement("td", cellText, "row" + rowIndex); 
    } 
}

Теперь мы готовы использовать papaparse

var csvString= "Restaurant, Extra Cheeze, Extra Mushroom, Size by Inch, Extra Spicy, Price (€)\nA, yes, yes, 12, no, 6\nB, no, yes, 15, yes, 8\nC, no, no, 9, no, 5\nD, yes, no, 12, yes, 7\nE, yes, no, 12, yes, 7.5\nF, no, yes, 15, yes, 9";
 
Papa.parse(csvString, { 
    complete: function(results) { 
        for(let i = 0; i < results.data.length; i++) { 
            if(i === 0) { 
                for(let j = 0; j < results.data[i].length; j++) { 
                    createHeaderElement(results.data[i][j]); 
                } 
            } 
            if(i > 0) { 
                for(let j = 0; j < results.data[i].length; j++) { 
                    createCellData(i, j, results.data[i][j]); 
            } 
         } 
       } 
    } 
});

Как видите, мы поместили csv в переменную строкового типа, чтобы упростить задачу. Мы также использовали две функции, определенные ранее, для рендеринга заголовка и строк таблицы.

Последние мысли

Вы можете найти полный код здесь, в нашем git-репозитории: CertosinoLab/mediumarticles at papaparse (github.com)

Как видите, papaparse очень прост в использовании, всего за несколько строк кода мы выполнили свою работу, кроме того, он предлагает очень подробную документацию, а благодаря своей популярности он полон примеров в сети.

Спасибо за чтение!