Efficient way to iterate through JSON response in JavaScript

Question

I have been reviewing the Khan Academy API ( https://github.com/Khan/khan-api/wiki/Khan-Academy-API ) and it identifies http://www.khanacademy.org/api/v1/topictree as the main API call. I am using the following code to get a list of categories that represents the same menu structure on the actual website.

$(document).ready(function() {
$.ajax({
url: "http://www.khanacademy.org/api/v1/topictree",
type: 'GET',
dataType: "json",
success: function(data) {                               
        for(var i = 0; i < data.children.length; i++)
        {                       
            //$("#mylist").append("<a href='http://myurl.com/Courses.html?CatId="+data.children[i].id+"'>"+data.children[i].title+"</a><br/>");             
        }        
    }
  }); 
});

I am not able to find the most efficient way to get at the children of a categroy and then print out the value of its url and name. Everytime I try to call the API my browser hangs since the JSON response is about 40mb of data. The GITHUB site at https://github.com/Khan/khan-api/wiki/Khan-Academy-API mentions that you should filter by topic but the examples provided are not at the root level so I am unable to determine the relationship of the partent to child.

Can someone help me find an efficient way to parse the JSON response and get the children value for each top level category? Also, what tools do you use to iterate through API calls and JSON responses before committing any code? Thank you for any help you can provide!

Answer 1

Also, what tools do you use to iterate through API calls and JSON responses before committing any code?

If you're asking for tools to examine the response of the request to the API before you start coding, the google chrome extension Advances Rest Client is designed for just that. There are most likely equivalent extensions for other mainstream browsers.