I want to develop a product comparison page, where a user can compare 2 or 3 products. I was thinking about a 3 column list displaying every specification. But I want to highlight the differences.

I could use a list and sort them alphabetically. And then if element x of list 1 is not equal to element x of list 2 then highlight it. But I 'm not sure every product has the same elements. Maybe element x is missing in list 2.

What could be a good method to develop this? Should I mark some elements on every product that can be compared (like a sort of element classes) ? So that I can check if elements from elements class x differ on 2 products. Any other suggestions?

  • Define "difference"? Do you mean to highlight each specification column which contains a value that isn't the same as the others? Or is a difference with respect to a specific product?
    – Neil
    Jun 20, 2014 at 9:29

1 Answer 1


To detect differences between two lists (lets call them A and B), generally you make two passes. The first pass checks each item of A and checks if it is in B, and if so, if the item in B has been changed in some fashion (if item is mutable at least). The second pass involves checking each item of B to see if it is not in A.

At the end of these two passes, you're left with a list of all items in A and not in B, all items in B and not in A, and all items that are in both but differ.

What you're talking about is a different, but only slightly. Rather than 2 lists, you have n. I'm assuming some specifications won't apply to some products and may hence be missing.

So in order to have to perform a pass for each list, it would be simpler to combine all specifications into a single Set (eliminate duplicates). Then, for each specification, cycle through each product. Take the first product as a frame of reference and check its value. Compare that value to every other product for that specification until you find a difference. If you find a difference, break and continue with the next specification. In this way, you only have to make a single pass for each product and for each specification (ok, two if you count getting a complete list of specifications assuming you don't have it already).

In this way, you know which specifications differ between products. However in general, in a product comparison, you exclude specifications which do not differ between products, so rather than highlight those which are different, I would simply suggest to remove it entirely. However that's just my 10 cents. ;)


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.