如何在循环中使用forEach函数，按SKU分组展示产品对应价格

我需要制作一份价格列表，要求根据SKU值，将同一个产品的所有价格统一展示在该产品的条目下方。目前我通过循环把数据数组的内容插入到div中，但当前代码会重复显示每个产品的标题和SKU，每个价格项都会带出一遍产品信息。我尝试在for循环中使用jQuery的$.each函数，结果得到了异常的重复内容。

原始代码 #

JavaScript #

var arr = [
  {
    "sku": "552",
    "title": "orange",
    "price": "1.55",
    "per": 1
  },
  {
    "sku": "552",
    "title": "orange",
    "price": "2.00",
    "per": 2
  },
  {
    "sku": "552",
    "title": "orange",
    "price": "3.50",
    "per": 4
  },
  {
    "sku": "551",
    "title": "bannana",
    "price": "0.95",
    "per": 1
  },
  {
    "sku": "551",
    "title": "bannana",
    "price": "2.20",
    "per": 3
  },
  {
    "sku": "544",
    "title": "apple",
    "price": "0.70",
    "per": 1
  },
  {
    "sku": "501",
    "title": "pear",
    "price": "1.15",
    "per": 1
  }
];

for(var i=0; i<arr.length; i++){
  var sku = arr[i].sku;
  var title = arr[i].title;
  var price = arr[i].price;
  var per = arr[i].per;

  var html = "<p>" + sku + " - " + title + "</p>";
  html +=   "<p><b>" + per + "</b> - " + price + "</p>";
                
  $("#div_1").append(html);
}

HTML #

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<div id="div_1"></div>

错误的尝试代码 #

for(var i=0; i<arr.length; i++){
  var sku = arr[i].sku;
  var title = arr[i].title;
  var price = arr[i].price;
  var per = arr[i].per;

  var html = "<p>" + sku + " - " + title + "</p>";
  
  $.each(arr, function(key, value) {
    html +=   "<p><b>" + per + "</b> - " + price + "</p>";
  });
                        
  $("#div_1").append(html);
}

解决方案 #

核心思路是先按SKU对数据进行分组，把同一个SKU的所有价格项归到一起，再统一渲染：

方法一：使用原生JS分组后渲染 #

// 按SKU分组数据
const groupedData = {};
arr.forEach(item => {
  if (!groupedData[item.sku]) {
    groupedData[item.sku] = {
      sku: item.sku,
      title: item.title,
      prices: []
    };
  }
  groupedData[item.sku].prices.push({
    per: item.per,
    price: item.price
  });
});

// 渲染分组后的数据
let html = '';
Object.values(groupedData).forEach(product => {
  html += `<p>${product.sku} - ${product.title}</p>`;
  product.prices.forEach(priceItem => {
    html += `<p><b>${priceItem.per}</b> - ${priceItem.price}</p>`;
  });
});

$("#div_1").append(html);

方法二：使用jQuery的$.each实现（逻辑一致） #

// 按SKU分组数据
const groupedData = {};
$.each(arr, function(index, item) {
  if (!groupedData[item.sku]) {
    groupedData[item.sku] = {
      sku: item.sku,
      title: item.title,
      prices: []
    };
  }
  groupedData[item.sku].prices.push({
    per: item.per,
    price: item.price
  });
});

// 渲染分组后的数据
let html = '';
$.each(Object.values(groupedData), function(index, product) {
  html += `<p>${product.sku} - ${product.title}</p>`;
  $.each(product.prices, function(idx, priceItem) {
    html += `<p><b>${priceItem.per}</b> - ${priceItem.price}</p>`;
  });
});

$("#div_1").append(html);

处理后每个产品只会显示一次SKU和标题，下方统一列出该产品的所有价格项，不会出现重复内容。

内容的提问来源于stack exchange，提问作者user16881755