时间戳

首页 > 解决方案 > 加入重复项目并添加数量

javascript - 加入重复项目并添加数量

问题描述

<div>我正在处理标签中包含的两位文本。一个包含项目，另一个包含数量。但是，有时我有多个相同但数量不同的项目，因此我不能只计算一个字符串的出现次数（我从使用此方法开始，发现它仅在数量为 1 时才有效）。

这是我正在使用的代码：

var joinArr = $('#rechighlight').html(); //get the recieved items
var qtyArr = $('#qtyArray').html(); //get the recieved qty

var createArr = joinArr.trim().split('<br>'); //split by br tag
var createArrQty = qtyArr.trim().split('<br>'); //split by br tag

var resultingArr = [createArr, createArrQty] //creates array in correct order
  .reduce((r, a) => (a.forEach((a, i) => (r[i] = r[i] || []).push(a)), r), [])
  .reduce((a, b) => a.concat(b));


var stringArr = JSON.stringify(resultingArr); //stringify results

document.getElementById("finArray").innerHTML = stringArr; //add results into new div
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      Items
    </td>
    <td>
      QTY
    </td>
  </tr>
  <tr>
    <td>
      <div id="orderhighlight">AAA <br> BBB<br>CCC<br></div>
    </td>
    <td>
      <div>5<br>3<br>2<br></div>
    </td>
  </tr>
  <tr>
    <td>
      Recieved Items
    </td>
    <td>
      Recieved QTY
    </td>
  </tr>
  <tr>
    <td>
      <div id="rechighlight">AAA<br>BBB<br>AAA<br>CCC<br>CCC<br></div>
    </td>
    <td>
      <div id="qtyArray">3<br>3<br>2<br>1<br>1<br></div>
    </td>
  </tr>
  <tr>
    <td>
      MY OUTPUT
    </td>
  </tr>
  <tr>
    <td>
      <div id="finArray"></div>
    </td>
  </tr>
  <tr>
    <td>
      EXPECTED OUTPUT
    </td>
  </tr>
  <tr>
    <td>
      <div>["AAA","5","BBB","3","CCC","2","",""]</div>
    </td>
  </tr>
</table>

我试过的：

我找到了一种使用以下代码在项目端合并重复值的方法。

var occurrences = resultingArr.reduce(function(obj, item) {
  obj[item] = (obj[item] || 0) + 1;
  return obj;
}, {});

但当然，问题在于数量被视为要合并的字符串。

总之，我如何合并数组中的重复字符串及其数量（如 HTML 第 52 行的预期输出所示）。

标签： javascriptjqueryhtml

解决方案

您的 reduce 函数只需要按以下方式构造：

var occurrences = createArr.reduce(function(obj, item, index) {
  obj[item] = Number(obj[item] || 0) + Number(createArrQty[index]);
  return obj;
}, {});

用键减少第一个数组，并将数组与数量相加。尽管您需要从每个数组中删除最后一项，因为它是.split函数中的空值。

只需在他们两个中执行 pop() 即可。代码如下。

var joinArr = $('#rechighlight').html(); //get the recieved items
var qtyArr = $('#qtyArray').html(); //get the recieved qty

var createArr = joinArr.trim().split('<br>'); //split by br tag
var createArrQty = qtyArr.trim().split('<br>'); //split by br tag
createArr.pop();
createArrQty.pop();

var occurrences = createArr.reduce(function(obj, item, index) {
  obj[item] = Number(obj[item] || 0) + Number(createArrQty[index]);
  return obj;
}, {});

var stringArr = JSON.stringify(occurrences); //stringify results

document.getElementById("finArray").innerHTML = stringArr; //add results into new div
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      Items
    </td>
    <td>
      QTY
    </td>
  </tr>
  <tr>
    <td>
      <div id="orderhighlight">AAA <br> BBB<br>CCC<br></div>
    </td>
    <td>
      <div>5<br>3<br>2<br></div>
    </td>
  </tr>
  <tr>
    <td>
      Recieved Items
    </td>
    <td>
      Recieved QTY
    </td>
  </tr>
  <tr>
    <td>
      <div id="rechighlight">AAA<br>BBB<br>AAA<br>CCC<br>CCC<br></div>
    </td>
    <td>
      <div id="qtyArray">3<br>3<br>2<br>1<br>1<br></div>
    </td>
  </tr>
  <tr>
    <td>
      MY OUTPUT
    </td>
  </tr>
  <tr>
    <td>
      <div id="finArray"></div>
    </td>
  </tr>
  <tr>
    <td>
      EXPECTED OUTPUT
    </td>
  </tr>
  <tr>
    <td>
      <div>["AAA","5","BBB","3","CCC","2","",""]</div>
    </td>
  </tr>
</table>

推荐阅读