sort JSON using parameters from links

Hi

I have a set of results in JSON format that I would like to be able to sort.

I'm writing a store front for a friend and would like to reduce database calls by doing the initial search the user requests, return this as JSON and then let the user play around with those results to display how they like without doing another DB call.

For example, at present the results come back in standard order, I would love these to then be displayed, at present in a simple dump to #initialOrder.

Then, when one of the links is clicked the order is sorted and re-dumped to the results box #sortedOrder

Ideally, although below I have the text values of the links with the returned names, for example iTitle I would prefer the link to pass this value, but have the text changeable, for example Product Title

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js" ></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js" ></script> 
</head>
<body>
        
		Initial Order<br />
		<div id="initialOrder"></div>
        
		<br /><br />
        
		Sorted Order<br />
		<div id="sortedOrder"></div>
        
        
        Sort By:
        <a href="#" value="iTitle">Product Title</a> | <a href="#">sellerTown</a> | <a href="#">sellerPostcode</a> | <a href="#">iDeliveryAvailable</a>
        
	<script>
		var MyJSONResult = '[{"iID":"17","iSellerID":"1","iCategory":"128","iTitle":"Gourmet gadgetry blender \/ smoothie maker \/ liquidiser","iCondition":"1","icCondition":"New","iImages":"2015\/05\/15\/o_19lbfidkl1j6l8ie1ncspcdqm97.jpg","iPrice":"20.00","iAcceptOffers":"0","iListForDays":"5","iDeliveryAvailable":"0","iDeliveryCharge":"0.00","iDeliveryChargePerMile":"0.25","iReturnsAccepted":"0","iFeatured":"0","iIsWantedItem":"0","iAdded":"2015-05-15 10:48:58","iBuyerID":null,"iDeliveryStatus":"1","iSellingAs":"2","iViews":"20","cName":"Small Electricals","idsDeliveryStatus":"Still For Sale","sellerID":"1","sellerScreenName":"Neil GoodMan","sellerRole":"1","sellerTown":"Chatham","sellerCounty":"Kent","sellerPostcode":"AB34 5CD","sellerDateRegistered":"2014-01-16 13:22:53","sellerType":"3","tBusinessName":"2nd company","tTradingAddress":"Chatham, Kent ","tTradingPostCode":"AB34 5CD","urRoleName":"Super Administrator","utType":"Business Seller","currentWatchers":"1"},{"iID":"16","iSellerID":"1","iCategory":"26","iTitle":"Suzuki GSX-R750","iCondition":"1","icCondition":"New","iImages":"2015\/06\/16\/o_19nufh7o21lnn65815tr16ta1s4u7.jpg","iPrice":"6300.00","iAcceptOffers":"0","iListForDays":"28","iDeliveryAvailable":"1","iDeliveryCharge":"25.00","iDeliveryChargePerMile":"0.40","iReturnsAccepted":"1","iFeatured":"0","iIsWantedItem":"0","iAdded":"2015-02-16 20:00:00","iBuyerID":null,"iDeliveryStatus":"2","iSellingAs":"2","iViews":"8","cName":"Motor Bikes","idsDeliveryStatus":"Pending Collection","sellerID":"1","sellerScreenName":"Neil GoodMan","sellerRole":"1","sellerTown":"Chatham","sellerCounty":"Kent","sellerPostcode":"AB34 5CD","sellerDateRegistered":"2014-01-16 13:22:53","sellerType":"3","tBusinessName":"2nd company","tTradingAddress":"Chatham, Kent ","tTradingPostCode":"AB34 5CD","urRoleName":"Super Administrator","utType":"Business Seller","currentWatchers":"1"},{"iID":"19","iSellerID":"1","iCategory":"186","iTitle":"cable","iCondition":"1","icCondition":"New","iImages":"2015\/06\/25\/o_19olbuclg1sjk1aqe1p8p1ql216pv7.jpeg","iPrice":"10.50","iAcceptOffers":"1","iListForDays":"28","iDeliveryAvailable":"0","iDeliveryCharge":"0.00","iDeliveryChargePerMile":"0.35","iReturnsAccepted":"0","iFeatured":"0","iIsWantedItem":"0","iAdded":"2015-06-25 13:45:35","iBuyerID":null,"iDeliveryStatus":"1","iSellingAs":"3","iViews":"0","cName":"Sporting Goods","idsDeliveryStatus":"Still For Sale","sellerID":"1","sellerScreenName":"Neil GoodMan","sellerRole":"1","sellerTown":"Chatham","sellerCounty":"Kent","sellerPostcode":"AB34 5CD","sellerDateRegistered":"2014-01-16 13:22:53","sellerType":"3","tBusinessName":"2nd company","tTradingAddress":"Chatham, Kent ","tTradingPostCode":"AB34 5CD","urRoleName":"Super Administrator","utType":"Business Seller","currentWatchers":"0"},{"iID":"2","iSellerID":"3","iCategory":"193","iTitle":"Little tykes","iCondition":"1","icCondition":"New","iImages":"2015\/02\/03\/o_19d7s2kkpo4f193aka48qp2i.JPG,2015\/02\/03\/o_19d7s4gq11ol013jo132nfkk10hjt.JPG","iPrice":"50.00","iAcceptOffers":"0","iListForDays":"6","iDeliveryAvailable":"0","iDeliveryCharge":"0.00","iDeliveryChargePerMile":"0.05","iReturnsAccepted":"0","iFeatured":"0","iIsWantedItem":"0","iAdded":"2015-01-24 21:07:19","iBuyerID":null,"iDeliveryStatus":"1","iSellingAs":"2","iViews":"0","cName":"Garden Toys ","idsDeliveryStatus":"Still For Sale","sellerID":"3","sellerScreenName":"Leigh","sellerRole":"1","sellerTown":"Gravesend","sellerCounty":"Kent","sellerPostcode":"AB12 3CD","sellerDateRegistered":"2014-03-03 09:08:15","sellerType":"3","tBusinessName":"Valued Seller ","tTradingAddress":"Gravesend, Kent","tTradingPostCode":"AB12 3CD","urRoleName":"Super Administrator","utType":"Business Seller","currentWatchers":"0"},{"iID":"10","iSellerID":"3","iCategory":"13","iTitle":"The wizard of Oz","iCondition":"1","icCondition":"New","iImages":"2015\/01\/29\/o_19crlgg89o0b1h6t7r2vi4a277.jpg","iPrice":"2.00","iAcceptOffers":"0","iListForDays":"7","iDeliveryAvailable":"0","iDeliveryCharge":"0.00","iDeliveryChargePerMile":"0.05","iReturnsAccepted":"0","iFeatured":"0","iIsWantedItem":"0","iAdded":"2015-01-29 20:18:55","iBuyerID":null,"iDeliveryStatus":"1","iSellingAs":"2","iViews":"0","cName":"Seniors (Age 12+)","idsDeliveryStatus":"Still For Sale","sellerID":"3","sellerScreenName":"Leigh","sellerRole":"1","sellerTown":"Gravesend","sellerCounty":"Kent","sellerPostcode":"AB12 3CD","sellerDateRegistered":"2014-03-03 09:08:15","sellerType":"3","tBusinessName":"Valued Seller ","tTradingAddress":"Gravesend, Kent","tTradingPostCode":"AB12 3CD","urRoleName":"Super Administrator","utType":"Business Seller","currentWatchers":"0"},{"iID":"14","iSellerID":"3","iCategory":"48","iTitle":"Unwanted stuff","iCondition":"5","icCondition":"Used","iImages":"2015\/01\/31\/o_19d088fac1761ne9rbt16fgadd7.jpg,2015\/01\/31\/o_19d088vqmosf1vrv1p32umk1vfci.jpg,2015\/01\/31\/o_19d089omku3k18n5vnqnjps0t.jpg","iPrice":"2.00","iAcceptOffers":"0","iListForDays":"1","iDeliveryAvailable":"0","iDeliveryCharge":"0.00","iDeliveryChargePerMile":"0.05","iReturnsAccepted":"0","iFeatured":"0","iIsWantedItem":"0","iAdded":"2015-01-31 15:03:59","iBuyerID":null,"iDeliveryStatus":"1","iSellingAs":"2","iViews":"0","cName":"4-5 Years","idsDeliveryStatus":"Still For Sale","sellerID":"3","sellerScreenName":"Leigh","sellerRole":"1","sellerTown":"Gravesend","sellerCounty":"Kent","sellerPostcode":"AB12 3CD","sellerDateRegistered":"2014-03-03 09:08:15","sellerType":"3","tBusinessName":"Valued Seller ","tTradingAddress":"Gravesend, Kent","tTradingPostCode":"AB12 3CD","urRoleName":"Super Administrator","utType":"Business Seller","currentWatchers":"0"}]'
		
			$(document).ready(function(){
				
				
				$("#initialOrder").val(MyJSONResult);
			
				MyJSONResult.sort(sort_by('iTitle', false));
				 
				var sort_by = function(field, reverse) {
					reverse = (reverse) ? -1 : 1;
					return function(a, b) {
						if (field.indexOf(":")!=-1){
							field = field.split(":");
							a = a[field[0]][field[1]];
							b = b[field[0]][field[1]];
						}
						else {
						   a = a[field];
						   b = b[field];
						}
						if (a < b) return reverse * -1;
						if (a > b) return reverse * 1;
						return 0;
					}
				}
						
				$("#sortedOrder").val(MyJSONResult);
				
			 }); 
		</script>	
</body>
</html>

Open in new window

LVL 3
Neil ThompsonSenior Systems DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

MlandaTCommented:
Please note:
I am not enclosing the JSON in quotes as you have done.
I have rewritten your SORT method
I have used a plugin called jsontotable to more easily visualise the data in a table format
THere are other plugins out there that will sort *any* given HTML table. Such as http://joequery.github.io/Stupid-Table-Plugin/#examples
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://raw.githubusercontent.com/jongha/jquery-jsontotable/master/src/jquery.jsontotable.js"></script>
    <style type="text/css">
        td {
            font-size: 9px;
        }
    </style>
</head>
<body>

    Initial Order<br />
    <div id="initialOrder"></div>

    Sorted Order<br />
    <div id="sortedOrder"></div>

    Sort By:
    <a href="#" value="iTitle" onclick="return sort(MyJSONResult, 'iTitle', true);">Product Title</a> |
    <a href="#" value="iTitle" onclick="return sort(MyJSONResult, 'iTitle', false);">Product Title DESC</a> |
    <a href="#" onclick="return sort(MyJSONResult, 'sellerTown', true);">sellerTown</a> |
    <a href="#" onclick="return sort(MyJSONResult, 'sellerPostcode', true);">sellerPostcode</a> |
    <a href="#" onclick="return sort(MyJSONResult, 'iDeliveryAvailable', true);">iDeliveryAvailable</a>

    <script type="text/javascript">

        var MyJSONResult = [{ "iID": "17", "iSellerID": "1", "iCategory": "128", "iTitle": "Gourmet gadgetry blender \/ smoothie maker \/ liquidiser", "iCondition": "1", "icCondition": "New", "iImages": "2015\/05\/15\/o_19lbfidkl1j6l8ie1ncspcdqm97.jpg", "iPrice": "20.00", "iAcceptOffers": "0", "iListForDays": "5", "iDeliveryAvailable": "0", "iDeliveryCharge": "0.00", "iDeliveryChargePerMile": "0.25", "iReturnsAccepted": "0", "iFeatured": "0", "iIsWantedItem": "0", "iAdded": "2015-05-15 10:48:58", "iBuyerID": null, "iDeliveryStatus": "1", "iSellingAs": "2", "iViews": "20", "cName": "Small Electricals", "idsDeliveryStatus": "Still For Sale", "sellerID": "1", "sellerScreenName": "Neil GoodMan", "sellerRole": "1", "sellerTown": "Chatham", "sellerCounty": "Kent", "sellerPostcode": "AB34 5CD", "sellerDateRegistered": "2014-01-16 13:22:53", "sellerType": "3", "tBusinessName": "2nd company", "tTradingAddress": "Chatham, Kent ", "tTradingPostCode": "AB34 5CD", "urRoleName": "Super Administrator", "utType": "Business Seller", "currentWatchers": "1" }, { "iID": "16", "iSellerID": "1", "iCategory": "26", "iTitle": "Suzuki GSX-R750", "iCondition": "1", "icCondition": "New", "iImages": "2015\/06\/16\/o_19nufh7o21lnn65815tr16ta1s4u7.jpg", "iPrice": "6300.00", "iAcceptOffers": "0", "iListForDays": "28", "iDeliveryAvailable": "1", "iDeliveryCharge": "25.00", "iDeliveryChargePerMile": "0.40", "iReturnsAccepted": "1", "iFeatured": "0", "iIsWantedItem": "0", "iAdded": "2015-02-16 20:00:00", "iBuyerID": null, "iDeliveryStatus": "2", "iSellingAs": "2", "iViews": "8", "cName": "Motor Bikes", "idsDeliveryStatus": "Pending Collection", "sellerID": "1", "sellerScreenName": "Neil GoodMan", "sellerRole": "1", "sellerTown": "Chatham", "sellerCounty": "Kent", "sellerPostcode": "AB34 5CD", "sellerDateRegistered": "2014-01-16 13:22:53", "sellerType": "3", "tBusinessName": "2nd company", "tTradingAddress": "Chatham, Kent ", "tTradingPostCode": "AB34 5CD", "urRoleName": "Super Administrator", "utType": "Business Seller", "currentWatchers": "1" }, { "iID": "19", "iSellerID": "1", "iCategory": "186", "iTitle": "cable", "iCondition": "1", "icCondition": "New", "iImages": "2015\/06\/25\/o_19olbuclg1sjk1aqe1p8p1ql216pv7.jpeg", "iPrice": "10.50", "iAcceptOffers": "1", "iListForDays": "28", "iDeliveryAvailable": "0", "iDeliveryCharge": "0.00", "iDeliveryChargePerMile": "0.35", "iReturnsAccepted": "0", "iFeatured": "0", "iIsWantedItem": "0", "iAdded": "2015-06-25 13:45:35", "iBuyerID": null, "iDeliveryStatus": "1", "iSellingAs": "3", "iViews": "0", "cName": "Sporting Goods", "idsDeliveryStatus": "Still For Sale", "sellerID": "1", "sellerScreenName": "Neil GoodMan", "sellerRole": "1", "sellerTown": "Chatham", "sellerCounty": "Kent", "sellerPostcode": "AB34 5CD", "sellerDateRegistered": "2014-01-16 13:22:53", "sellerType": "3", "tBusinessName": "2nd company", "tTradingAddress": "Chatham, Kent ", "tTradingPostCode": "AB34 5CD", "urRoleName": "Super Administrator", "utType": "Business Seller", "currentWatchers": "0" }, { "iID": "2", "iSellerID": "3", "iCategory": "193", "iTitle": "Little tykes", "iCondition": "1", "icCondition": "New", "iImages": "2015\/02\/03\/o_19d7s2kkpo4f193aka48qp2i.JPG,2015\/02\/03\/o_19d7s4gq11ol013jo132nfkk10hjt.JPG", "iPrice": "50.00", "iAcceptOffers": "0", "iListForDays": "6", "iDeliveryAvailable": "0", "iDeliveryCharge": "0.00", "iDeliveryChargePerMile": "0.05", "iReturnsAccepted": "0", "iFeatured": "0", "iIsWantedItem": "0", "iAdded": "2015-01-24 21:07:19", "iBuyerID": null, "iDeliveryStatus": "1", "iSellingAs": "2", "iViews": "0", "cName": "Garden Toys ", "idsDeliveryStatus": "Still For Sale", "sellerID": "3", "sellerScreenName": "Leigh", "sellerRole": "1", "sellerTown": "Gravesend", "sellerCounty": "Kent", "sellerPostcode": "AB12 3CD", "sellerDateRegistered": "2014-03-03 09:08:15", "sellerType": "3", "tBusinessName": "Valued Seller ", "tTradingAddress": "Gravesend, Kent", "tTradingPostCode": "AB12 3CD", "urRoleName": "Super Administrator", "utType": "Business Seller", "currentWatchers": "0" }, { "iID": "10", "iSellerID": "3", "iCategory": "13", "iTitle": "The wizard of Oz", "iCondition": "1", "icCondition": "New", "iImages": "2015\/01\/29\/o_19crlgg89o0b1h6t7r2vi4a277.jpg", "iPrice": "2.00", "iAcceptOffers": "0", "iListForDays": "7", "iDeliveryAvailable": "0", "iDeliveryCharge": "0.00", "iDeliveryChargePerMile": "0.05", "iReturnsAccepted": "0", "iFeatured": "0", "iIsWantedItem": "0", "iAdded": "2015-01-29 20:18:55", "iBuyerID": null, "iDeliveryStatus": "1", "iSellingAs": "2", "iViews": "0", "cName": "Seniors (Age 12+)", "idsDeliveryStatus": "Still For Sale", "sellerID": "3", "sellerScreenName": "Leigh", "sellerRole": "1", "sellerTown": "Gravesend", "sellerCounty": "Kent", "sellerPostcode": "AB12 3CD", "sellerDateRegistered": "2014-03-03 09:08:15", "sellerType": "3", "tBusinessName": "Valued Seller ", "tTradingAddress": "Gravesend, Kent", "tTradingPostCode": "AB12 3CD", "urRoleName": "Super Administrator", "utType": "Business Seller", "currentWatchers": "0" }, { "iID": "14", "iSellerID": "3", "iCategory": "48", "iTitle": "Unwanted stuff", "iCondition": "5", "icCondition": "Used", "iImages": "2015\/01\/31\/o_19d088fac1761ne9rbt16fgadd7.jpg,2015\/01\/31\/o_19d088vqmosf1vrv1p32umk1vfci.jpg,2015\/01\/31\/o_19d089omku3k18n5vnqnjps0t.jpg", "iPrice": "2.00", "iAcceptOffers": "0", "iListForDays": "1", "iDeliveryAvailable": "0", "iDeliveryCharge": "0.00", "iDeliveryChargePerMile": "0.05", "iReturnsAccepted": "0", "iFeatured": "0", "iIsWantedItem": "0", "iAdded": "2015-01-31 15:03:59", "iBuyerID": null, "iDeliveryStatus": "1", "iSellingAs": "2", "iViews": "0", "cName": "4-5 Years", "idsDeliveryStatus": "Still For Sale", "sellerID": "3", "sellerScreenName": "Leigh", "sellerRole": "1", "sellerTown": "Gravesend", "sellerCounty": "Kent", "sellerPostcode": "AB12 3CD", "sellerDateRegistered": "2014-03-03 09:08:15", "sellerType": "3", "tBusinessName": "Valued Seller ", "tTradingAddress": "Gravesend, Kent", "tTradingPostCode": "AB12 3CD", "urRoleName": "Super Administrator", "utType": "Business Seller", "currentWatchers": "0" }];

        $(document).ready(function () {

            $.jsontotable(MyJSONResult, { id: '#initialOrder', header: false });

        });

        function sort(data, prop, asc) {

            data = data.sort(function (a, b) {
                if (asc) return (a[prop] > b[prop]) ? 1 : ((a[prop] < b[prop]) ? -1 : 0);
                else return (b[prop] > a[prop]) ? 1 : ((b[prop] < a[prop]) ? -1 : 0);
            });

            $('#sortedOrder').html('');
            $.jsontotable(data, { id: '#sortedOrder', header: true });

        }
    </script>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Neil ThompsonSenior Systems DeveloperAuthor Commented:
Excellent, many thanks that's great :)

I have noticed though that for example lower case titles are ordered differently, for example a lower case c comes after A-Z ordering, is there a way to make case insensitive?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.