jQuery: Sort an API List Alphabetically

After my recent schooling in JavaScript, I was very excited to take on a minor work project that let me flex my new vocabulary and solve an issue for our librarians.

js_success

My Journey

Platform: Springshare’s LibGuides

Problem: Their A-Z list needs to display a list of specific databases according to type and sort those combined lists alphabetically.

Solution: Access LibGuides A-Z API. Target the desired databases by ID. Append a sorted list into a pre-constructed div.

Springshare got me started by providing the API information and offering some iterative code. This was my jumping off point:

jQuery(document).ready(function() {
jQuery.getJSON(“https://lgapi.libapps.com/1.1/assets?site_id=3728&key=f73cbce180e1d6de553031a6644fb391&asset_types=10&expand=az_types (https://lgapi.libapps.com/1.1/assets?site_id=3728&key=f73cbce180e1d6de553031a6644fb391&asset_types=10&expand=az_types) “, function( data )
{var items = [];
var list = [];
jQuery.each( data, function( key, val ) {
items.push(val);
});
jQuery.each(items, function( key, val) {
var dbName = val.name;
var dbHref = val.url;
if (val.az_types[0].id === 8280) {
list.push(“<li id='” + key + “‘>” + “<a href='” + dbHref + “\’>” + dbName + “</a>” + “</li>”);
}

if (val.az_types[0].id === 8381) {
list.push(“<li id='” + key + “‘>” + “<a href='” + dbHref + “\’>” + dbName + “</a>” + “</li>”);
}

});
jQuery(‘#list-div’).append(list);
});
});

I refactored their code, then set out to figure out why simply tacking on .sort() to the end of .append(list) was not working for me. Half a day later, it occurred to me that I needed to be targeting the list items themselves, rather than the div that held that list! After spending much time on StackOverflow and several developers’ blogs, here is my final code:

$(function() {
$.getJSON(‘//lgapi.libapps.com/1.1/assets?site_id=3728&key=f73cbce180e1d6de553031a6644fb391&asset_types=10&expand=az_types’, function(data){
var sortList = function(a, b){
return $(a).text().toLowerCase() > $(b).text().toLowerCase() ? 1:-1;
};
var items = [];
var list = [];
$.each(data, function(k,v) {
items.push(v);
});

$.each(items, function(k,v) {
var dbName = v.name;
var dbHref = v.url;
var dbDesc = v.description;
if (v.az_types[0].id === 8280 || v.az_types[0].id === 8381) {
list.push(“<li id='” + k + “‘><a href='” + dbHref + “\’>” + dbName + “</a><br>” + dbDesc + “</li>”);
}
});

$(‘#list-div ul’).append(list).children(‘li’).sort(sortList).appendTo(‘#list-div ul’);
});
});

Of course, that was AFTER I refactored with some ES6 using the arrow function as my sort function. But after getting nothing in IE11, it occurred to me to check if that functionality was available for that browser (caniuse.com). Nope. Back to the regular old function expression! But I was satisfied that I had learned to use the arrow function, and will keep that close by when all browsers (ahem, Microsoft…) catch up.

caniuse

In Conclusion

I’m on my way to being more proficient in JavaScript! I’m comfortable refactoring code, searching for methods that work, and using the ternary operator. The above code is a beginner’s solution, but a good start to getting what we wanted. And I’m excited to be a part of that solution. Bonus: I wrote a bookmarklet during this development process to count the number of database links that were coming through, so I could verify we were filtering the right ones.

Thanks, FreeCodeCamp, for pushing me forward, teaching me some basics, and giving me the confidence to offer solutions.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s