首先通过使用groupedData进行排序来分组，然后对数组进行排序并添加每个产品。
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);
            }
        }

字符串

如果你是Web开发的新手，我建议你使用一个简单的模板引擎，比如mustache，这会让你的生活变得简单：）Link 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/的

由于你还没有真正使用任何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);

个字符