Converting JSON from API to collection of "course" objects

Question

I have an end goal of making an application that allows users to put in parameters for their class schedule (i.e "I need Class A, Class B, and Class C, I'd like to take either Class D, G, E, I only want to take 4 classes, and I don't want class before 10am) and then I'd like to present to the user all of their possible schedules (using something like events in Full Calendar http://arshaw.com/fullcalendar/)

I don't know much about working with APIs or JSON (new to JavaScript also) so I'm just a bit overwhelmed with the possibilities on how to do this.

I've searched extensively and found $.getJSON mentioned a lot, so I have something like this:

$.getJSON(
    "http://vazzak2.ci.northwestern.edu/courses/?term=4540&subject=ACCT",
    function(result) 
    {

    }
);

which I believe returns the JSON as a string, yes? Is there a good way to split this into objects or maybe arrays?

Part of the JSON is shown here for brevity:

[
  {
    "id": 52239,
    "title": "Accounting for Decision Making",
    "term": "2014 Spring",
    "school": "KGSM",
    "instructor": {
      "name": "Ronald A Dye",
      "bio": null,
      "address": null,
      "phone": null,
      "office_hours": null
    },
    "subject": "ACCT",
    "catalog_num": "430-0",
    "section": "71",
    "room": "Wieboldt Hall 207",
    "meeting_days": "Tu",
    "start_time": "18:00:00",
    "end_time": "21:00:00",
    "start_date": "2014-03-31",
    "end_date": "2014-06-07",
    "seats": 65,
    "overview": null,
    "topic": null,
    "attributes": null,
    "requirements": null,
    "component": "LEC",
    "class_num": 37561,
    "course_id": 3,
    "coursedesc_set": [],
    "coursecomponent_set": []
 },
...
...

]

I have tried:

obj = JSON.parse(result);

and suggestions on the web say to follow with something like:

alert(obj.id);

However, this doesn't work, because is seems like the JSON pulled from the API is nested in a way (ie it's all the courses offered in that subject, and each is a JSON). So it doesn't know which "id" value to return. If you look at the link to the JSON you may get a better idea of what I mean. If anyone has any guidance on where to start here it'd be much appreciated. I've just been reading about json and still haven't gotten anywhere.

If I could figure out how to parse the json into each of it's objects, then I could call "all classes with 'time' > 10am for example.

Answer 1

The returned object is an array. You'll need to iterate over each element in the array.

Updated with a working demo:

$.getJSON("http://vazzak2.ci.northwestern.edu/courses/?term=4540&subject=ACCT", function(result) {
    var earlyCourses = [];

    $(result).each(function (index, item) {
        $('#search_results').text((index+1) + " total courses");

        if (item.start_time > '10:00:00') {
            console.log(item);
            $('#morning_results_list').append('<li>' + item.title + '</li>');
        }        
    });
});

With the following boilerplate container:

<h2 id="search_results"></h2>

<div id="morning_results_container">
    <h5>Morning Courses</h5>
    <ul id="morning_results_list">
    </ul>    
</div>

Some notes about this example:

• The time check here is horribly naive and is reverting to an alphabetical comparison rather than an actual date/time check.
• Inserting multiple li in this fashion is bad for UI performance, all updates to the DOM should be batched to a single update. The example of per iteration insertion will work as long as the number of results is small (less than several hundred).

JSFIDDLE EXAMPLE: http://jsfiddle.net/h2a3t/