使用 javascript/jquery 在 html table 中动态添加来自 csv 的值

Question

我有一个来自另一个供应商的动态生成的 CSV 文件，我正在输入该文件，需要在我的网站上的 table 中显示。问题是我需要能够操作 CSV 中的数据，以便它可以在 html table 中显示更正后的值。最后我需要 HTML table 来显示产品，而不是混合集。

我正在使用 jquery 和 papaparse 库来获取数据并在 html 中的 table 中解析它。我的代码笔在这里：

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

javascript 提取初始 csv 值并显示在 table 中，但我不知道如何将这些值相加。如果有更好的方法来解决这个问题，比如将 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 应为产品 1 和产品 2 添加 100。
混合组 2 应为产品 2 和产品 3 添加 50。
混合组 3 应为产品 1、产品 2 和产品 3 添加 75。

我想以产品输出结束，并将正确的数字添加到公式中。最终结果将是 table，其中 Product 1 = 185、Product 2 = 245 和 Product 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 table:

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));
    }
});

请注意，这需要 ID 为 my-table 的 table 已经存在于您的 HTML 中：您可以手动解析 CSV 数据的第一行以添加 table 个标题。

另请注意，如果您的 CSV 数据集非常大，这绝对不是最佳解决方案，因为它需要遍历所有行两次，然后再次遍历所有列表使用计算值构建。

使用 javascript/jquery 在 html table 中动态添加来自 csv 的值

Dynamically add values from a csv in an html table using javascript/jquery

javascript

jquery

ajax

csv

papaparse