Question

使用Papaparse，我试图用重复的SKU添加行。我试图这样做而不添加像D3这样的另一个JS库。我的CSV看起来像这样：

SKU,Daily total,Weekly total
AAA111,2,10
BBB222,4,6
CCC333,11,19
AAA111,5,11
BBB222,6,12

我输出了表中的所有行，但我需要动态添加具有相同SKU编号的所有行。

    <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));
    }
});

我试图让AAA1111的计数为7和21，而BBB222的计数为10和18。

我在这里有一个工作示例：https://codepen.io/BIGREDBOOTS/pen/LjmojW

Answer 1

这是一个ES6解决方案，它使用散列来存储SKU，并使用reduce操作来聚合日期和星期总计：

＆＃13;

const data = `SKU,Daily total,Weekly total
AAA111,2,10
BBB222,4,6
CCC333,11,19
AAA111,5,11
BBB222,6,12`

// remove the header row and parse numbers
const rows = data.split('\n').slice(1).map((row) => { 
   return row.split(',').map(i => !isNaN(Number(i)) ? Number(i) : i)
})

const aggregate = rows.reduce((p, row) => {
  let [sku, dayTotal, weekTotal] = row
  if (p[sku]) {
    let [_, prevDayTotal, prevWeekTotal] = p[sku]
    p[sku] = [sku, prevDayTotal + dayTotal, prevWeekTotal + weekTotal]
  } else {
    p[sku] = [sku, dayTotal, weekTotal]
  }
  return p
}, {})

console.log(aggregate)

＆＃13;

使用javascript中的重复值从CSV添加行

1 个答案: