I coded from an API for the first time, and so can you!

A couple of weeks ago, my library upped our Libguides instance to Libguides CMS, which means that a few weeks ago I came to be in charge of a system that has APIs for the first time in my life. We got the system so that we can pull more robust information from Libguides into our discovery system (so that’s our systems librarian’s domain, not mine), but there have been a couple of tiny things I’ve wanted to do that would be so much better with an API than with the built-in widgets, so I cracked my knuckles and set to learning.

Here’s the first tiny project I did, narrated so that you can do something similar if you, like me, are not an expert in web coding but have access to Libguides APIs.

Building an API-fed dropdown menu

I know, I know, there are dropdown menus of guides available in the built-in widget builder, but I don’t like how they look, and I don’t like that you need the “Go” button to make them go. So this made a perfect first toe-in-the-water project for me.

Getting data via the API

First, I needed to figure out how to make an API request. Libguides CMS “Endpoints v1.1” has a section to GET Guides, a list of “parameters,” an example request, an example return, and not much else. It took me a while to figure out that the example request didn’t work because it was asking for 2 specific guide IDs — IDs for guides that do not exist in our system. Once I deleted those two numbers I could start building requests that actually worked.

Image may be NSFW.
Clik here to view.

Then I figured out that you add a parameter by adding “&parameter_name=parameter_value” to that base URL. So http://lgapi-us.libapps.com/1.1/guides/?site_id=…=owner&sort_by=name would take all our guides and sort them by guide name. From there I could happily keep adding parameters, and if I wanted both “Course” and “Subject” guides but not other guides, I could put a comma between the parameter values “2” and “3” to get “&guide_types=2,3” in my request URL.

Other useful terminology I learned along the way that will help my future Googling includes:

• that this is a RESTful API
• and that the output format is JSON.

In the end, I created an API request for published guides, sorted by name, and filtered to just those having a particular tag. Here’s an example record from the JSON output I got from that request:

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Using the API-generated data to feed a dropdown menu

Then came the searching around through StackOverflow for examples of code that uses a URL to point to JSON-formatted information, examples of code that use JSON fields to populate a dropdown menu, and examples of code that use javascript to add an “event sniffer” to a dropdown menu so that when a user selects an option, the menu opens a new URL without requiring anything else (like clicking a pesky “go” button). This step took me a while… In the end, I fiddled and fiddled with example code until all of a sudden, bits and pieces started to work! So exciting! And little by little I arrived at code that works for me.

Here’s an annotated version of what I built (and an html document you can download and mess with).

Image may be NSFW.
Clik here to view.

(And if you are someone who actually knows what they’re doing, and you see that I made dumb mistakes/choices, please let me know! I’m eager to learn.)