Динамически добавлять значения из CSV в HTML-таблицу, используя javascript/jquery

Question

У меня есть динамически сгенерированный файл CSV от другого поставщика, который мне нужен, и мне нужно показать его в таблице на моем сайте. Проблема в том, что мне нужно иметь возможность манипулировать данными из CSV, чтобы они могли отображать исправленные значения в таблице HTML. В конце концов, мне нужна таблица HTML для отображения продуктов, а не смешанных наборов.

Я использую jquery и библиотеку papaparse, чтобы получить данные и проанализировать их в виде таблицы в html. Мой кодекс здесь:

https://codepen.io/BIGREDBOOTS/pen/YQojww

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

Мой CSV выглядит так:

product_title,product_sku,net_quantity
Product 1,PRD1,10
Product 2,PRD2,20
Product 3,PRD3,30
Mixed Set 1,MIX1,100
Mixed Set 2,MIX2,50
Mixed Set 3,MIX3,75

Я использую Javascript:

    function arrayToTable(tableData) {
        var table = $('<table></table>');
        $(tableData).each(function (i, rowData) {
            var row = $('<tr class="rownum-' + [i] + '"></tr>');
            $(rowData).each(function (j, cellData) {
                row.append($('<td class="' + [i] + '">'+cellData+'</td>'));
            });
            table.append(row);
        });
        return table;
    }

    $.ajax({
        type: "GET",
        url: "https://cdn.shopify.com/s/files/1/0453/8489/t/26/assets/sample.csv",
        success: function (data) {
            $('body').append(arrayToTable(Papa.parse(data).data));
        }
    });

Мои правила для смешанного набора:

• Смешанный набор 1 должен добавить 100 к продукту 1 и продукту 2.
• Смешанный набор 2 должен добавить 50 к продукту 2 и продукту 3.
• Смешанный набор 3 должен добавить 75 к продукту 1, продукту 2 и продукту 3.

Я хотел бы в конечном итоге получить только продукты и правильные числа, добавленные в формулу. Конечным результатом будет таблица с продуктом 1 = 185, продуктом 2 = 245 и продуктом 3 = 155.

Хотя было бы еще лучше, если бы верхние элементы THEAD были в "th", хорошо, если это слишком сложно.

<table>
    <tbody>
        <tr class="rownum-0">
            <td class="0">product_title</td>
            <td class="0">product_sku</td>
            <td class="0">net_quantity</td>
        </tr>
        <tr class="rownum-1">
            <td class="1">Product 1</td>
            <td class="1">PRD1</td>
            <td class="1">185</td>
        </tr>
        <tr class="rownum-2">
            <td class="2">Product 2</td>
            <td class="2">PRD2</td>
            <td class="2">245</td>
        </tr>
        <tr class="rownum-3">
            <td class="3">Product 3</td>
            <td class="3">PRD3</td>
            <td class="3">155</td>
        </tr>
    </tbody>
</table>

Answer 1

Не зная размера набора данных, с которым вы работаете, я предлагаю вам сначала выполнить итерацию по всему набору данных CSV, чтобы заполнить список продуктов правильными значениями, а затем выполнить итерацию еще раз для заполнения таблицы HTML:

function datasetToMap(data) {
    var ret = {};
    //Initialize a map with all the product rows
    $(data).each(function(index, row) {
        if(row[0].startsWith("Product")) {
            ret[row[1]] = row; //Using the SKU as the key to the map
        }
    });

    //Apply your mixed sets rules to the elements in the ret array        
    $(data).each(function(index, row) {
        if(row[1] === "MIX1") {
            ret["PRD1"][2] += 100;
            ret["PRD2"][2] += 100;
        }
        //Do the same for Mixed sets 2 and 3
    });
    return ret;
}

function appendMapToTable(map) {
    var $table = $('#my-table');
    Object.keys(map).forEach(function(key, i) {
        var rowData = map[key];
        var row = $('<tr class="rownum-' + [i] + '"></tr>');
        $(rowData).each(function (j, cellData) {
            row.append($('<td class="' + [j] + '">'+cellData+'</td>'));
        });
        $table.append(row);
    });
}

$.ajax({
    type: "GET",
    url: "https://cdn.shopify.com/s/files/1/0453/8489/t/26/assets/sample.csv",
    success: function (data) {
        appendMapToTable(datasetToMap(Papa.parse(data).data));
    }
});

Обратите внимание, что это ожидает таблицу с идентификатором my-table чтобы уже присутствовать в вашем HTML: вы можете вручную проанализировать первую строку ваших данных CSV, чтобы добавить заголовки таблицы.

Также обратите внимание, что если ваш набор данных CSV очень большой, это определенно не является оптимальным решением, так как для этого требуется дважды повторить все его строки, а затем снова повторить весь список, построенный с вычисленными значениями.