使用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數據集非常大這絕對不是最佳的解決方案，因爲它需要迭代通過其所有行兩次，然後再迭代通過與計算值建立的所有名單。