javascript - Sort getJson using pure JS - no plugins -
so trying sort external json file. end goal output data table , allow user click on table header , sort data. first trying figure out how sort data. close function below works in 2 out of 3 cases. have use pure js , have following code:
<!doctype html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=windows-1252"> </head> <body> <div id="cattable"></div> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> function sortjsonarraybyproperty(objarray, prop, direction){ if (arguments.length<2) throw new error("sortjsonarraybyprop requires 2 arguments"); var direct = arguments.length>2 ? arguments[2] : 1; //default ascending if (objarray && objarray.constructor===array){ var proppath = (prop.constructor===array) ? prop : prop.split("."); objarray.sort(function(a,b){ (var p in proppath){ if (a[proppath[p]] && b[proppath[p]]){ = a[proppath[p]]; b = b[proppath[p]]; } } // convert numeric strings integers = a.match(/^\d+$/) ? +a : a; b = b.match(/^\d+$/) ? +b : b; return ( (a < b) ? -1*direct : ((a > b) ? 1*direct : 0) ); }); } } $.getjson('cats.json', function(cats) { sortjsonarraybyproperty(cats, 'cats.coffeepreference'); document.write(cats[0].country); document.write(cats[0].breed); document.write(cats[0].coffeepreference); document.write(cats[1].country); document.write(cats[1].breed); document.write(cats[1].coffeepreference); }); </script> </body> </html>
and following external json file cats.json
[{ "breed" : "abyssinian", "country" : "ethiopia", "coffeepreference" : "espresso", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/gustav_chocolate.jpg/100px-gustav_chocolate.jpg" }, { "breed" : "aegean", "country" : "greece", "coffeepreference" : "medium roast, cream , sugar", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/aegean_cat.jpg/100px-aegean_cat.jpg" }, { "breed" : "american curl", "country" : "united states", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/american_curl_2.jpg/100px-american_curl_2.jpg" }, { "breed" : "american bobtail", "country" : "united states", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/american_bobtail_2.jpg/100px-american_bobtail_2.jpg" }, { "breed" : "american shorthair", "country" : "united states", "coffeepreference" : "skinny mocha latte", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/american_shorthair.jpg/100px-american_shorthair.jpg" }, { "breed" : "american wirehair", "country" : "united states", "coffeepreference" : "skinny mocha latte", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/american_wirehair…jpg/100px-american_wirehair_-_cff_cat_show_heinola_2008-05-04_img_8721.jpg" }, { "breed" : "arabian mau", "country" : "arabian peninsula", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/3yoarabianmau.jpeg/100px-3yoarabianmau.jpeg", "coffeepreference" : "cafe au lait" }, { "breed" : "australian mist", "country" : "australia", "coffeepreference" : "irish coffee", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/australian_mist.jpg/100px-australian_mist.jpg" }, { "breed" : "asian", "country" : "developed in united kingdom (founding stock asia)", "coffeepreference" : "iced coffee", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/brownvarientasiancat.jpg/100px-brownvarientasiancat.jpg" }, { "breed" : "asian semi-longhair", "country" : "united kingdom", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/tiffanie_at_cat_show.jpg/100px-tiffanie_at_cat_show.jpg" }, { "breed" : "balinese", "country" : "developed in united states (founding stock thailand)", "coffeepreference" : "french roast", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/oskar.jpg/100px-oskar.jpg" }, { "breed" : "bambino", "country" : "united states", "picture" : "", "coffeepreference" : "cafe au lait" }, { "breed" : "bengal", "country" : "developed in united states (founding stock asia)", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/bengalcat_stella.jpg/100px-bengalcat_stella.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "birman", "country" : "burma", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/birman2.jpg/100px-birman2.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "bombay", "country" : "developed in united states (founding stock asia)", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/bombay_cat.jpg/100px-bombay_cat.jpg" }, { "breed" : "brazilian shorthair", "country" : "brazil", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/gato_pelo_curto_brasileiro.jpg/100px-gato_pelo_curto_brasileiro.jpg" }, { "breed" : "british semi-longhair", "country" : "united kingdom", "coffeepreference" : "americano" }, { "breed" : "british shorthair", "country" : "united kingdom", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/britishblue.jpg/100px-britishblue.jpg" }, { "breed" : "british longhair", "country" : "united kingdom", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/british_longhair_-_black_silver_shaded.jpg/100px-british_longhair_-_black_silver_shaded.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "burmese", "country" : "burma , thailand", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/blissandlucky11.jpg/100px-blissandlucky11.jpg" }, { "breed" : "burmilla", "country" : "united kingdom", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/male_burmilla_cat.jpeg/100px-male_burmilla_cat.jpeg", "coffeepreference" : "cafe au lait" }, { "breed" : "california spangled", "country" : "united states", "coffeepreference" : "cream, no sugar", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/star_spangled_cat.jpg/100px-star_spangled_cat.jpg" }, { "breed" : "chantilly-tiffany", "country" : "united states", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/tiffany3.jpg/100px-tiffany3.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "chartreux", "country" : "france", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/abbaye_fev2006_003.jpg/100px-abbaye_fev2006_003.jpg" }, { "breed" : "chausie", "country" : "france", "coffeepreference" : "two sugars", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/chausiecatexample.jpg/100px-chausiecatexample.jpg" }, { "breed" : "cheetoh", "country" : "united states", "coffeepreference" : "cream, no sugar", "picture" : "https://upload.wikimedia.org/wikipedia/en/thumb/6/6a/cheetoh_cat_chilling.png/100px-cheetoh_cat_chilling.png" }, { "breed" : "colorpoint shorthair", "country" : "", "picture" : "https://upload.wikimedia.org/wikipedia/en/thumb/d/d5/jake117.jpg/100px-jake117.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "cornish rex", "country" : "united kingdom (england)", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/bebopslilacprince.jpg/100px-bebopslilacprince.jpg" }, { "breed" : "cymric or manx longhair", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/cymric_-_norwegia…ric_-_norwegian_forest_cat_presentation_show_kotka_2009-02-01_img_0687.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "cyprus", "country" : "cyprus", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/cyprusshorthair.jpg/100px-cyprusshorthair.jpg" }, { "breed" : "devon rex", "country" : "united kingdom (england)", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/devon_rex_izzy.jpg/100px-devon_rex_izzy.jpg" }, { "breed" : "donskoy or don sphynx", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/cat_don_sphinx.jpg/100px-cat_don_sphinx.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "dragon li", "country" : "china", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/dragon_li_-_li_hua_mau1.jpg/100px-dragon_li_-_li_hua_mau1.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "dwarf cat or dwelf", "coffeepreference" : "cafe au lait" }, { "breed" : "egyptian mau", "country" : "italy", "coffeepreference" : "cream, no sugar", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/egy_mau.jpg/100px-egy_mau.jpg" }, { "breed" : "european shorthair", "country" : "sweden", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/european_shorthair_procumbent_quincy.jpg/100px-european_shorthair_procumbent_quincy.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "exotic shorthair", "country" : "united states", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/cream_tabby_exotic_cat.jpg/100px-cream_tabby_exotic_cat.jpg" }, { "breed" : "german rex", "country" : "east germany", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/german_rex_emi.jpg/100px-german_rex_emi.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "havana brown", "country" : "united kingdom", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/havana_brown.jpg/100px-havana_brown.jpg" }, { "breed" : "highlander", "country" : "united kingdom (scotland)", "coffeepreference" : "americano" }, { "breed" : "himalayan or colorpoint persian", "coffeepreference" : "french roast", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/chocolate_himlayan.jpg/100px-chocolate_himlayan.jpg" }, { "breed" : "japanese bobtail", "country" : "japan", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/japanesebobtailblueeyedmi-ke.jpg/100px-japanesebobtailblueeyedmi-ke.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "javanese", "country" : "united states", "coffeepreference" : "french roast", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/javanese_cat.jpg/100px-javanese_cat.jpg" }, { "breed" : "kurilian bobtail", "country" : "western russia", "coffeepreference" : "cafe au lait" }, { "breed" : "khao manee", "country" : "thailand", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/khao_manee_%22chawee%22.jpg/100px-khao_manee_%22chawee%22.jpg" }, { "breed" : "korat", "country" : "thailand", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/veda%2cchat-adult…m%c3%a2le-race-korat.jpg/100px-veda%2cchat-adulte-m%c3%a2le-race-korat.jpg" }, { "breed" : "korn ja", "country" : "thailand", "coffeepreference" : "carmel latte grande" }, { "breed" : "kurilian bobtail or kuril islands bobtail", "country" : "japan ", "picture" : " https : //upload.wikimedia.org/wikipedia/commons/thumb/8/82/kurilian_bobtail.jpg/100px-kurilian_bobtail.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "laperm", "country" : "united states", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/laperm_lh_red_tabby.jpg/100px-laperm_lh_red_tabby.jpg" }, { "breed" : "lykoi", "country" : "united states", "coffeepreference" : "two sugars" }, { "breed" : "maine coon", "country" : "united states", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/maine_coon_female.jpg/100px-maine_coon_female.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "manx", "country" : "united kingdom (isle of man)", "coffeepreference" : "skinny mocha latte", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/japanese_bobtail_looking_like_manx.jpg/100px-japanese_bobtail_looking_like_manx.jpg" }, { "breed" : "mekong bobtail", "country" : "russia", "coffeepreference" : "french roast", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/mekong_bobtail_fe…_pride_cattery.jpg/100px-mekong_bobtail_female%2c_cofein_pride_cattery.jpg" }, { "breed" : "minskin", "country" : "united states", "coffeepreference" : "americano", "picture" : "" }, { "breed" : "munchkin", "country" : "united states", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/longhairedmunchkin.jpg/100px-longhairedmunchkin.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "nebelung", "country" : "united states", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/nebelung_male%2c_…n_song_de_chine.jpg/100px-nebelung_male%2c_aleksandr_van_song_de_chine.jpg" }, { "breed" : "norwegian forest cat", "country" : "norway", "coffeepreference" : "skinny mocha latte", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/norskskogkatt_evita_3.jpg/100px-norskskogkatt_evita_3.jpg" }, { "breed" : "ocicat", "country" : "united states", "coffeepreference" : "cream, no sugar", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/ocicat-charan.jpg/100px-ocicat-charan.jpg" }, { "breed" : "oriental bicolor", "country" : "", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/oriental_shorthair_20070130_caroline.jpg/100px-oriental_shorthair_20070130_caroline.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "oriental shorthair", "country" : "", "coffeepreference" : "skinny mocha latte", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/oriental_shorthai…ile%29.jpg/100px-oriental_shorthair_blue_eyed_white_cat_%28juvenile%29.jpg" }, { "breed" : "oriental longhair", "country" : "", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/olh-gip_divan_cesar.jpg/100px-olh-gip_divan_cesar.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "persian (modern persian cat)", "country" : "united states", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/persialainen.jpg/100px-persialainen.jpg" }, { "breed" : "persian (traditional persian cat)", "country" : "greater iran", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/snowyandhazy.jpg/100px-snowyandhazy.jpg" }, { "breed" : "peterbald", "country" : "russia", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/tamila_the_lilac_tabby_peterbald_cat.jpg/100px-tamila_the_lilac_tabby_peterbald_cat.jpg" }, { "breed" : "pixie-bob", "country" : "united states", "coffeepreference" : "cream, no sugar", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/jarnac_bepacific_feb07.jpg/100px-jarnac_bepacific_feb07.jpg" }, { "breed" : "ragamuffin", "country" : "united states", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/20050922amarillores.jpg/100px-20050922amarillores.jpg" }, { "breed" : "ragdoll", "country" : "united states", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/ragdoll_from_gatil_ragbelas.jpg/100px-ragdoll_from_gatil_ragbelas.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "russian blue", "country" : "russia", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/russian_blue_001.gif/100px-russian_blue_001.gif" }, { "breed" : "russian white, black , tabby", "country" : "australia", "coffeepreference" : "cafe au lait" }, { "breed" : "sam sawet", "country" : "thailand", "coffeepreference" : "carmel latte grande" }, { "breed" : "savannah", "country" : "united states", "coffeepreference" : "cream, no sugar", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/savannah_cat_portrait.jpg/100px-savannah_cat_portrait.jpg" }, { "breed" : "scottish fold", "country" : "united kingdom (scotland)", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/lilac_scottish_fold.jpg/100px-lilac_scottish_fold.jpg" }, { "breed" : "selkirk rex", "country" : "united states", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/en/thumb/c/c3/polloselkirkrex.jpg/100px-polloselkirkrex.jpg" }, { "breed" : "serengeti", "country" : "united states", "coffeepreference" : "cream, no sugar", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/serengetimalecat.jpg/100px-serengetimalecat.jpg" }, { "breed" : "serrade petit", "country" : "france", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/serrade_petit.jpg/100px-serrade_petit.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "siamese", "country" : "thailand", "coffeepreference" : "french roast", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/siam_lilacpoint.jpg/100px-siam_lilacpoint.jpg" }, { "breed" : "siberian", "country" : "russia", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/qgcfillimor.jpg/100px-qgcfillimor.jpg" }, { "breed" : "singapura", "country" : "singapore", "coffeepreference" : "two sugars", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/raffles_singapura_cat.jpg/100px-raffles_singapura_cat.jpg" }, { "breed" : "snowshoe", "country" : "united states", "coffeepreference" : "french roast", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/snowshoe_%28cat%29.jpg/100px-snowshoe_%28cat%29.jpg" }, { "breed" : "sokoke", "country" : "kenya", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/sokoke_dalili.jpg/100px-sokoke_dalili.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "somali", "country" : "somalia", "coffeepreference" : "two sugars", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/blue_somali_kitten_age_3_months.jpg/100px-blue_somali_kitten_age_3_months.jpg" }, { "breed" : "sphynx", "country" : "canada", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/sphinx2_july_2006.jpg/100px-sphinx2_july_2006.jpg" }, { "breed" : "suphalak", "country" : "thailand", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/en/thumb/5/52/suphalak_female_in_tha…umdaengmanee.jpg/100px-suphalak_female_in_thailand_named_aumdaengmanee.jpg" }, { "breed" : "thai", "country" : "thailand", "coffeepreference" : "french roast", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/mimbi3.jpg/100px-mimbi3.jpg" }, { "breed" : "tonkinese", "country" : "canada", "coffeepreference" : "turkish", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/tonkinese.gif/100px-tonkinese.gif" }, { "breed" : "toyger", "country" : "united states", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/toyger_-_cornish_…ger_-_cornish_rex_presentation_show_riihim%c3%a4ki_2008-11-16_img_0101.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "turkish angora", "country" : "turkey", "coffeepreference" : "skinny mocha latte", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/angora.jpg/100px-angora.jpg" }, { "breed" : "turkish van", "country" : "developed in united kingdom (founding stock turkey)", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/turkish_van_example2.jpg/100px-turkish_van_example2.jpg", "coffeepreference" : "cafe au lait" } ]
the sort function works when called on cats.breed andcats.coffeepreference blank screen when calling function on cats.country. can explain why happening?
latest update
when sort posted larger json-object sort function incurr following error (visible in developer console window): "exception: typeerror: a.match not function"
.
this caused attempt test numeric contents. .match()
method of string
object, when a.country
or b.country
happens empty (=undefined
) there is no string object function match()
found! if comment out concerning lines
// = a.match(/^\d+$/) ? +a : a; // b = b.match(/^\d+$/) ? +b : b;
(or use sort function suggested, see edited version below) problem gone.
update
i had closer @ own sorting routine , found following:
the second argument
prop
complicated: enter composite object name there'cats.coffeepreference'
split 2 components. far good, loop on components (in example'cats'
,'coffeepreference'
) , expect find properties these names incats
-objectsa
,b
passed sort-callback function. first property'cats'
undefined
, it's waste of time (and code) looking it. luckily check existance first, nonetheless superfluous.the check numerical data ok, half-hearted. looks strings consisting of numbers , nothing else. so, if variable contained string
' 1'
or'2.5'
(or stuff'-.1'
or'10.30 '
) not recognised being "numeric". regexp-based test like/^(?=.*\d)\s*-?\d*\.?\d*\s*?$/.test(a);
or alternatively simpler function
!isnan(a)
will tell whether
a
numeric or not.
i tested sort function and, despite above mentioned shortcomings: it still works!
however, here simplified version of sort:
function catsrt(arr,prop,dir){ dir=dir||1; // default sort direction arr.sort(function(a,b){ var aa=a[prop]||'0',bb=b[prop]||'0'; // '0' in case of "undefined" entries return aa.localecompare(bb)*dir; // use string method localecompare }); } $('button').click(function(){ var prop=$(this).text(),dir=$('input:checked').length==1?-1:1; catsrt(cats,prop,dir); $('#out').html($.map(cats,function(cat){return $.map(cat,function(v,k){ return k+':<span class="'+k+'">'+v+'</span>';}).join(',');}).join('<hr>')); $('.'+prop).css('color',dir>0?'green':'red'); }); var cats=[{ "breed" : "abyssinian", "country" : "ethiopia", "coffeepreference" : "espresso", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/gustav_chocolate.jpg/100px-gustav_chocolate.jpg" }, { "breed" : "aegean", "country" : "greece", "coffeepreference" : "medium roast, cream , sugar", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/aegean_cat.jpg/100px-aegean_cat.jpg" }, { "breed" : "american curl", "country" : "united states", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/american_curl_2.jpg/100px-american_curl_2.jpg" }, { "breed" : "american bobtail", "country" : "united states", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/american_bobtail_2.jpg/100px-american_bobtail_2.jpg" }, { "breed" : "american shorthair", "country" : "united states", "coffeepreference" : "skinny mocha latte", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/american_shorthair.jpg/100px-american_shorthair.jpg" }, { "breed" : "american wirehair", "country" : "united states", "coffeepreference" : "skinny mocha latte", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/american_wirehair…jpg/100px-american_wirehair_-_cff_cat_show_heinola_2008-05-04_img_8721.jpg" }, { "breed" : "arabian mau", "country" : "arabian peninsula", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/3yoarabianmau.jpeg/100px-3yoarabianmau.jpeg", "coffeepreference" : "cafe au lait" }, { "breed" : "australian mist", "country" : "australia", "coffeepreference" : "irish coffee", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/australian_mist.jpg/100px-australian_mist.jpg" }, { "breed" : "asian", "country" : "developed in united kingdom (founding stock asia)", "coffeepreference" : "iced coffee", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/brownvarientasiancat.jpg/100px-brownvarientasiancat.jpg" }, { "breed" : "asian semi-longhair", "country" : "united kingdom", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/tiffanie_at_cat_show.jpg/100px-tiffanie_at_cat_show.jpg" }, { "breed" : "balinese", "country" : "developed in united states (founding stock thailand)", "coffeepreference" : "french roast", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/oskar.jpg/100px-oskar.jpg" }, { "breed" : "bambino", "country" : "united states", "picture" : "", "coffeepreference" : "cafe au lait" }, { "breed" : "bengal", "country" : "developed in united states (founding stock asia)", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/bengalcat_stella.jpg/100px-bengalcat_stella.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "birman", "country" : "burma", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/birman2.jpg/100px-birman2.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "bombay", "country" : "developed in united states (founding stock asia)", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/bombay_cat.jpg/100px-bombay_cat.jpg" }, { "breed" : "brazilian shorthair", "country" : "brazil", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/gato_pelo_curto_brasileiro.jpg/100px-gato_pelo_curto_brasileiro.jpg" }, { "breed" : "british semi-longhair", "country" : "united kingdom", "coffeepreference" : "americano" }, { "breed" : "british shorthair", "country" : "united kingdom", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/britishblue.jpg/100px-britishblue.jpg" }, { "breed" : "british longhair", "country" : "united kingdom", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/british_longhair_-_black_silver_shaded.jpg/100px-british_longhair_-_black_silver_shaded.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "burmese", "country" : "burma , thailand", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/blissandlucky11.jpg/100px-blissandlucky11.jpg" }, { "breed" : "burmilla", "country" : "united kingdom", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/male_burmilla_cat.jpeg/100px-male_burmilla_cat.jpeg", "coffeepreference" : "cafe au lait" }, { "breed" : "california spangled", "country" : "united states", "coffeepreference" : "cream, no sugar", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/star_spangled_cat.jpg/100px-star_spangled_cat.jpg" }, { "breed" : "chantilly-tiffany", "country" : "united states", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/tiffany3.jpg/100px-tiffany3.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "chartreux", "country" : "france", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/abbaye_fev2006_003.jpg/100px-abbaye_fev2006_003.jpg" }, { "breed" : "chausie", "country" : "france", "coffeepreference" : "two sugars", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/chausiecatexample.jpg/100px-chausiecatexample.jpg" }, { "breed" : "cheetoh", "country" : "united states", "coffeepreference" : "cream, no sugar", "picture" : "https://upload.wikimedia.org/wikipedia/en/thumb/6/6a/cheetoh_cat_chilling.png/100px-cheetoh_cat_chilling.png" }, { "breed" : "colorpoint shorthair", "country" : "", "picture" : "https://upload.wikimedia.org/wikipedia/en/thumb/d/d5/jake117.jpg/100px-jake117.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "cornish rex", "country" : "united kingdom (england)", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/bebopslilacprince.jpg/100px-bebopslilacprince.jpg" }, { "breed" : "cymric or manx longhair", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/cymric_-_norwegia…ric_-_norwegian_forest_cat_presentation_show_kotka_2009-02-01_img_0687.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "cyprus", "country" : "cyprus", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/cyprusshorthair.jpg/100px-cyprusshorthair.jpg" }, { "breed" : "devon rex", "country" : "united kingdom (england)", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/devon_rex_izzy.jpg/100px-devon_rex_izzy.jpg" }, { "breed" : "donskoy or don sphynx", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/cat_don_sphinx.jpg/100px-cat_don_sphinx.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "dragon li", "country" : "china", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/dragon_li_-_li_hua_mau1.jpg/100px-dragon_li_-_li_hua_mau1.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "dwarf cat or dwelf", "coffeepreference" : "cafe au lait" }, { "breed" : "egyptian mau", "country" : "italy", "coffeepreference" : "cream, no sugar", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/egy_mau.jpg/100px-egy_mau.jpg" }, { "breed" : "european shorthair", "country" : "sweden", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/european_shorthair_procumbent_quincy.jpg/100px-european_shorthair_procumbent_quincy.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "exotic shorthair", "country" : "united states", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/cream_tabby_exotic_cat.jpg/100px-cream_tabby_exotic_cat.jpg" }, { "breed" : "german rex", "country" : "east germany", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/german_rex_emi.jpg/100px-german_rex_emi.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "havana brown", "country" : "united kingdom", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/havana_brown.jpg/100px-havana_brown.jpg" }, { "breed" : "highlander", "country" : "united kingdom (scotland)", "coffeepreference" : "americano" }, { "breed" : "himalayan or colorpoint persian", "coffeepreference" : "french roast", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/chocolate_himlayan.jpg/100px-chocolate_himlayan.jpg" }, { "breed" : "japanese bobtail", "country" : "japan", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/japanesebobtailblueeyedmi-ke.jpg/100px-japanesebobtailblueeyedmi-ke.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "javanese", "country" : "united states", "coffeepreference" : "french roast", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/javanese_cat.jpg/100px-javanese_cat.jpg" }, { "breed" : "kurilian bobtail", "country" : "western russia", "coffeepreference" : "cafe au lait" }, { "breed" : "khao manee", "country" : "thailand", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/khao_manee_%22chawee%22.jpg/100px-khao_manee_%22chawee%22.jpg" }, { "breed" : "korat", "country" : "thailand", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/veda%2cchat-adult…m%c3%a2le-race-korat.jpg/100px-veda%2cchat-adulte-m%c3%a2le-race-korat.jpg" }, { "breed" : "korn ja", "country" : "thailand", "coffeepreference" : "carmel latte grande" }, { "breed" : "kurilian bobtail or kuril islands bobtail", "country" : "japan ", "picture" : " https : //upload.wikimedia.org/wikipedia/commons/thumb/8/82/kurilian_bobtail.jpg/100px-kurilian_bobtail.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "laperm", "country" : "united states", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/laperm_lh_red_tabby.jpg/100px-laperm_lh_red_tabby.jpg" }, { "breed" : "lykoi", "country" : "united states", "coffeepreference" : "two sugars" }, { "breed" : "maine coon", "country" : "united states", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/maine_coon_female.jpg/100px-maine_coon_female.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "manx", "country" : "united kingdom (isle of man)", "coffeepreference" : "skinny mocha latte", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/japanese_bobtail_looking_like_manx.jpg/100px-japanese_bobtail_looking_like_manx.jpg" }, { "breed" : "mekong bobtail", "country" : "russia", "coffeepreference" : "french roast", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/mekong_bobtail_fe…_pride_cattery.jpg/100px-mekong_bobtail_female%2c_cofein_pride_cattery.jpg" }, { "breed" : "minskin", "country" : "united states", "coffeepreference" : "americano", "picture" : "" }, { "breed" : "munchkin", "country" : "united states", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/longhairedmunchkin.jpg/100px-longhairedmunchkin.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "nebelung", "country" : "united states", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/nebelung_male%2c_…n_song_de_chine.jpg/100px-nebelung_male%2c_aleksandr_van_song_de_chine.jpg" }, { "breed" : "norwegian forest cat", "country" : "norway", "coffeepreference" : "skinny mocha latte", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/norskskogkatt_evita_3.jpg/100px-norskskogkatt_evita_3.jpg" }, { "breed" : "ocicat", "country" : "united states", "coffeepreference" : "cream, no sugar", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/ocicat-charan.jpg/100px-ocicat-charan.jpg" }, { "breed" : "oriental bicolor", "country" : "", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/oriental_shorthair_20070130_caroline.jpg/100px-oriental_shorthair_20070130_caroline.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "oriental shorthair", "country" : "", "coffeepreference" : "skinny mocha latte", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/oriental_shorthai…ile%29.jpg/100px-oriental_shorthair_blue_eyed_white_cat_%28juvenile%29.jpg" }, { "breed" : "oriental longhair", "country" : "", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/olh-gip_divan_cesar.jpg/100px-olh-gip_divan_cesar.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "persian (modern persian cat)", "country" : "united states", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/persialainen.jpg/100px-persialainen.jpg" }, { "breed" : "persian (traditional persian cat)", "country" : "greater iran", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/snowyandhazy.jpg/100px-snowyandhazy.jpg" }, { "breed" : "peterbald", "country" : "russia", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/tamila_the_lilac_tabby_peterbald_cat.jpg/100px-tamila_the_lilac_tabby_peterbald_cat.jpg" }, { "breed" : "pixie-bob", "country" : "united states", "coffeepreference" : "cream, no sugar", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/jarnac_bepacific_feb07.jpg/100px-jarnac_bepacific_feb07.jpg" }, { "breed" : "ragamuffin", "country" : "united states", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/20050922amarillores.jpg/100px-20050922amarillores.jpg" }, { "breed" : "ragdoll", "country" : "united states", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/ragdoll_from_gatil_ragbelas.jpg/100px-ragdoll_from_gatil_ragbelas.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "russian blue", "country" : "russia", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/russian_blue_001.gif/100px-russian_blue_001.gif" }, { "breed" : "russian white, black , tabby", "country" : "australia", "coffeepreference" : "cafe au lait" }, { "breed" : "sam sawet", "country" : "thailand", "coffeepreference" : "carmel latte grande" }, { "breed" : "savannah", "country" : "united states", "coffeepreference" : "cream, no sugar", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/savannah_cat_portrait.jpg/100px-savannah_cat_portrait.jpg" }, { "breed" : "scottish fold", "country" : "united kingdom (scotland)", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/lilac_scottish_fold.jpg/100px-lilac_scottish_fold.jpg" }, { "breed" : "selkirk rex", "country" : "united states", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/en/thumb/c/c3/polloselkirkrex.jpg/100px-polloselkirkrex.jpg" }, { "breed" : "serengeti", "country" : "united states", "coffeepreference" : "cream, no sugar", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/serengetimalecat.jpg/100px-serengetimalecat.jpg" }, { "breed" : "serrade petit", "country" : "france", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/serrade_petit.jpg/100px-serrade_petit.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "siamese", "country" : "thailand", "coffeepreference" : "french roast", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/siam_lilacpoint.jpg/100px-siam_lilacpoint.jpg" }, { "breed" : "siberian", "country" : "russia", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/qgcfillimor.jpg/100px-qgcfillimor.jpg" }, { "breed" : "singapura", "country" : "singapore", "coffeepreference" : "two sugars", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/raffles_singapura_cat.jpg/100px-raffles_singapura_cat.jpg" }, { "breed" : "snowshoe", "country" : "united states", "coffeepreference" : "french roast", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/snowshoe_%28cat%29.jpg/100px-snowshoe_%28cat%29.jpg" }, { "breed" : "sokoke", "country" : "kenya", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/sokoke_dalili.jpg/100px-sokoke_dalili.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "somali", "country" : "somalia", "coffeepreference" : "two sugars", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/blue_somali_kitten_age_3_months.jpg/100px-blue_somali_kitten_age_3_months.jpg" }, { "breed" : "sphynx", "country" : "canada", "coffeepreference" : "americano", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/sphinx2_july_2006.jpg/100px-sphinx2_july_2006.jpg" }, { "breed" : "suphalak", "country" : "thailand", "coffeepreference" : "carmel latte grande", "picture" : "https://upload.wikimedia.org/wikipedia/en/thumb/5/52/suphalak_female_in_tha…umdaengmanee.jpg/100px-suphalak_female_in_thailand_named_aumdaengmanee.jpg" }, { "breed" : "thai", "country" : "thailand", "coffeepreference" : "french roast", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/mimbi3.jpg/100px-mimbi3.jpg" }, { "breed" : "tonkinese", "country" : "canada", "coffeepreference" : "turkish", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/tonkinese.gif/100px-tonkinese.gif" }, { "breed" : "toyger", "country" : "united states", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/toyger_-_cornish_…ger_-_cornish_rex_presentation_show_riihim%c3%a4ki_2008-11-16_img_0101.jpg", "coffeepreference" : "cafe au lait" }, { "breed" : "turkish angora", "country" : "turkey", "coffeepreference" : "skinny mocha latte", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/angora.jpg/100px-angora.jpg" }, { "breed" : "turkish van", "country" : "developed in united kingdom (founding stock turkey)", "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/turkish_van_example2.jpg/100px-turkish_van_example2.jpg", "coffeepreference" : "cafe au lait" }];
span {font-weight:bold}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox">descending<br> <button>breed</button><button>country</button><button>coffeepreference</button> <div id="out"></div>
Comments
Post a Comment