Question

I’m looking to build a system that styles the search results from DocumentCloud (and allows me to link to a given document).

I know I can query DocumentCloud and return JSON results using a search string like this:

https://www.documentcloud.org/api/search.json?q=obama

I don’t know how to:

1. Grab the output of the search and put it on my own page
2. Style the data once I have it on my page

I’d just like to know how to get started with this, I’m experienced with HTML and CSS but I’ve never worked with JSON before.

There’s more info here but I just don’t know where to get started: https://www.documentcloud.org/help/api

Answer 1

It sounds like you’re not so familiar with JavaScript, correct? JSON stands for JavaScript Ojbect Notation, so to work with it, you’ll have to dive in a bit. I strongly recommend looking into using a JavaScript framework/library, namely jQuery to handle the heavy lifting. (There are other worthy libraries, but jQuery is by far the most popular, and is very friendly, using CSS-like selectors to manipulate the document object model).

check this jQuery tutorial: How jQuery Works

Here’s a primer on using jQuery’s jsonp to fetch remote rsults and using them in a page: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/

You might end up with code in a javascript file, or a script tag (following a link to the jQuery library) that looks like this:

$(document).ready(function () {

    $.getJSON('https://www.documentcloud.org/api/search.json?q=obama&callback=?', null, function (results) {
            // this would append whatever the json returns for 'total' 
            // inside an element on your page with an id of 'resultsCount':
            $('#restulsCount').append(data.total); 
          });   

});

As a result, extra text & markup can be added to elements you already have on your page in whatever form/position you need it, and regular CSS rules from any style block or CSS file linked on your page will apply to them.

Good luck.