javascript - 使用 javascript/jquery 在 html 表中动态添加 csv 中的值

Question

我有一个来自另一个 vendor 的动态生成的 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 应将产品 1 和产品 2 添加 100。
• 混合套装 2 应为产品 2 和产品 3 添加 50。
• 混合集 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));
    }
});

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

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