Question

我有来自其他供应商的动态生成的CSV文件，我正在制作并需要在我的网站上的表格中显示。问题是我需要能够操纵CSV中的数据，以便它可以在html表中显示更正的值。最后，我需要HTML表来显示产品，而不是混合集。

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

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应该向产品1，产品2和产品3添加75.

我想最终得到Just产品输出，并将正确的数字添加到公式中。最终结果将是产品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数据集非常大，这绝对不是最佳解决方案，因为它需要遍历其所有行两次，然后再次迭代所有使用计算值构建的列表。

使用javascript / jquery

1 个答案: