How do I extract a specific value from a JSON returned object with javascript?

Question

I'm doing the codecademy javascript API tutorial using calls to the Sunlight Foundations API. i have completed the full codecacemy javascript course, and may be missing soemthign simple.

I would like to extract the number of results from the returned JSON Object, which is currently being displayed in HTML thanks to jquery.

here is a sample of the returned object:

{
"num_found": 347,
"results": [
    {
        "speaker_state": "NC",
        "speaker_first": "Virginia",
        "congress": 111,
        "title": "CULTIVATING AMERICAN ENERGY RESOURCES",
        "origin_url": "http://origin.www.gpo.gov/fdsys/pkg/CREC-2009-07-30/html/CREC-2009-07-30-pt1-PgH9197.htm",
        "number": 117,
        "pages": "H9197-H9203",
        "volume": 155,
        "chamber": "House",
        "session": 1,
        "speaking": [
            "Well, I think that this is a great segue to talk about the other subject that we wanted to talk about tonight, which is health care, and what is happening with the health care debate."
        ],
        "capitolwords_url": "http://capitolwords.org/date/2009/07/30/H9197_cultivating-american-energy-resources/",
        "speaker_party": "R",
        "date": "2009-07-30",
        "bills": null,
        "bioguide_id": "F000450",
        "order": 14,
        "speaker_last": "Foxx",
        "speaker_raw": "ms. foxx"
    },
    ...
]

}

Here is the last statement that shows the results:

  var query_params = { apikey: 'f6ab5f2e4f69444b9f2c0a44d9a5223d',
                   phrase: word
                 };

  var endpoint = 'http://capitolwords.org/api/text.json'

  var options = {
    data: query_params,
    type: 'GET',
    dataType: 'jsonp'      
  };

    var request = jQuery.ajax(endpoint, options)
                        .done(showResponse);

If the last line above returns the object, how do I chain a method onto .done() which will extract for example, "num_found"?

That's the hint provided is to chain a method, but I don't quite get this. Thanks for any help.

Answer 1

You can execute a function after the AJAX request has (successfully) finished by adding the "success" option:

var query_params = { 

   apikey:    'f6ab5f2e4f69444b9f2c0a44d9a5223d',
   phrase:    word
};

$.ajax({

   url:       'http://capitolwords.org/api/text.json',
   data:      query_params,
   type:      'GET',
   dataType:  'jsonp',
   success:   showResponse
});

function showResponse(response) {

   alert(response.num_found);
}

It will be passed the response from the server as an object, because jQuery does all the complicated JSONP work for you. This example will execute the function showResponse and and alert the value of num_found.

This might also help you: http://learn.jquery.com/ajax/working-with-jsonp/

Answer 2

Not sure but I think this is what you want:

.done(function(data){
     var myVar = .....
     showResponse(myVar);
});