如何使用 for 循环中的每个函数

如果你是 Web 开发的新手，我建议你使用一个简单的模板引擎，比如 mustachel，这将使你的生活变得轻松:)链接 https://github.com/janl/mustache.js/

查看您的输入，您似乎需要来自后端 API 共鸣本身的正确数据。

但是，由于您已经有了输入，您应该能够使用 groupby 功能解决问题，在这种情况下，您可以使用 JS reduce by title。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

下面是一个示例：

const result = products.reduce((x, y) => {
  (x[y.title] = x[y.title] || []).push(y);
    return x;
}, {});

https://jsfiddle.net/k1smzcnv/1/

首先使用 groupedData 按 SKU 分组，然后迭代 arr 数组并添加每个产品。

https://jsfiddle.net/grsn27hk/

 var groupedData = {};

        // Group the data by SKU
        for (var i = 0; i < arr.length; i++) {
            var sku = arr[i].sku;

            if (!groupedData[sku]) {
                groupedData[sku] = [];
            }

            groupedData[sku].push(arr[i]);
        }

        // Display the grouped data
        for (var sku in groupedData) {
            if (groupedData.hasOwnProperty(sku)) {
                var products = groupedData[sku];
                var skuTitle = products[0].sku + " - " + products[0].title;

                var html = "<p>" + skuTitle + "</p>";

                for (var j = 0; j < products.length; j++) {
                    var product = products[j];
                    html += "<p><b>" + product.per + "</b> - " + product.price + "</p>";
                }

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

由于您还没有真正使用任何 jQuery 特定功能，因此我冒昧地使用 Vanilla 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
  }
];

const res=arr.reduce((a,c)=>{ // group according to sku:
(a[c.sku]=a[c.sku]||{title:c.title,prices:[]}).prices.push([c.per,c.price]);
 return a;
},{});
// map over all keys and values of res:
let html=Object.entries(res).map(([sku,c])=>`<p>${sku} - ${c.title}</p><p>prices:<br>${c.prices.map(([per,price])=>`<b>${per}</b> - ${price}`).join("<br>\n")}`).join("</p>\n");                    

// Append the generated HTML to #div_1:
document.getElementById("div_1").insertAdjacentHTML("beforeend",html);

<div id="div_1"></div>