I am struggling with an issue related to displaying products fetched from an ajax response. The problem arises when multiple products share the same image, causing redundancy in the table. I aim to identify all products with identical rec.Photo and showcase them on a single row, accompanied by a message stating "we have variants of similar products - click on the photo to see more..." My main concerns are: a) How can I accurately identify all products with the same photo? b) Is there a way to display the message "see more similar products..." on one row without disrupting the loop?
$.each(response, function (i, rec) {
if (i > 0) {
strproductlist += '<div class="gridItem listView">';
strproductlist += ' <div class="gridItemContent">';
strproductlist += '<div class="productPhoto">';
strproductlist += '<a title="' + rec.ProductName + '" href="ProductDetails.aspx?productid=' +
rec.ProductID + '">';
strproductlist += '<img alt="' + rec.ProductName + '" src="' + rec.Photo + '">';
strproductlist += '</a>';
strproductlist += '</div>';
strproductlist += '<div class="listViewProductDet">';
strproductlist += '<h2>';
strproductlist += '<a title="" href="ProductDetails.aspx?productid=' + rec.ProductID + '">' +
rec.ProductName + '</a>';
strproductlist += '</h2>';
strproductlist += '<p class="productCode">' + rec.ProductCode + '</p>';
strproductlist += '<ul class="fieldlist">';
strproductlist += '</div>';
strproductlist += '</div>';
strproductlist += '</div>';
}
//Edit I am providing details for four sample records where three of them share the same image.
-------- ProductID=1 ProductName=product1 Photo=~/products/product1.jpg ProductCode=001 -------- ProductID=2 ProductName=product2 Photo=~/products/product1.jpg ProductCode=002 -------- ProductID=3 ProductName=product3 Photo=~/products/product1.jpg ProductCode=003 -------- ProductID=4 ProductName=product4 Photo=~/products/product2.jpg ProductCode=004