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

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应添加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)); 
    } 
}); 

请注意，此愿与ID my-table表在你的HTML已经存在：你可以手工解析您CSV数据的第一行添加表格标题。

还要注意的是，如果你的CSV数据集非常大这绝对不是最佳的解决方案，因为它需要迭代通过其所有行两次，然后再迭代通过与计算值建立的所有名单。