Currently, I am utilizing Papaparse to sum up rows with duplicate SKUs in my CSV file. I'm striving to achieve this task without the use of additional JS libraries such as D3. Here is a snippet of how my CSV data is structured:
SKU,Daily total,Weekly total
AAA111,2,10
BBB222,4,6
CCC333,11,19
AAA111,5,11
BBB222,6,12
Although I have successfully displayed all rows from the table, I am aiming to dynamically combine rows with identical SKU numbers together.
<script>
function datasetToMap(data) {
var ret = {};
$(data).each(function(index, row) {
ret[row] = row;
});
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/testcsv.csv",
success: function (data) {
appendMapToTable(datasetToMap(Papa.parse(data).data));
}
});
I aim to display AAA1111 with totals of 7 and 21, while BBB222 will show totals of 10 and 18 in the table.
A live demonstration can be found at: https://codepen.io/BIGREDBOOTS/pen/LjmojW