CODEWITHSUNDEEP
jquery
user1452893
user1452893

Reputation: 868

How do I get the data returned from this ajax call to use as vars?

New to Ajax calls. Need some pointers to start my learning but want to do it with a real example.

This link: http://api.tumblr.com/v2/blog/david.tumblr.com/info?api_key=API_KEY

returns this to my browser which is a good example of data I'll be using:

{
    "meta": {
        "status": 200,
        "msg": "OK"
    },
    "response": {
        "blog": {
            "title": "David\u2019s Log",
            "posts": 3981,
            "name": "david",
            "url": "http:\/\/www.davidslog.com\/",
            "updated": 1348785660,
            "description": "\u201cMr. Karp is tall and skinny, with unflinching blue eyes and a mop of brown hair. He speaks incredibly fast and in complete paragraphs.\u201d \u2013 NY Observer",
            "ask": false
        }
    }
}

I think I could use this as a start but definitely open to other ways:

var tumblrURL = "david.tumblr.com";

jQuery.ajax({
    url: "http://api.tumblr.com/v2/blog/" + tumblrURL + "/info",
    data: {api_key: "MY_PRIVATE_API_KEY"},
    dataType: "jsonp",
});​

But I am lost as to proper ways to parse out and get the different bits returned and use them as vars or for tests in the call.

For example, how do I get "status" or the "name"?

When the status is a 200 then I would want to make a var out of the name ("david") and use it for other options.

Or, if the status is a 404 then I would want to do something else (like return an error).

Please, no flames. I'm trying to learn and if I get a few examples or pointers I will be able to move on to more interesting stuff. I'm OK with other aspects of jQuery so those issues should be fine.

Thanks!

Upvotes: 0

Views: 76

Answers (2)

Sushanth --
Sushanth --

Reputation: 55750

Generally after a ajax call happens , if the request is a success i.e, if you get the response you access it in the success callback function...

jQuery.ajax({
    url: "http://api.tumblr.com/v2/blog/" + tumblrURL + "/info?api_key=MY_PRIVATE_API_KEY",  // The url you want to pass
    dataType: "jsonp",  // The type of format expecting
    data: "{}",  // Your data to be sent
    success: function(result) {   // If ajax is a success
       alert('Ajax request Success !!');
   },
    error: error(jqXHR, textStatus, errorThrown) {  //If error in ajax
        alert('Error occured  : ' + errorThrown);
    }
});

This is just the basic setup of ajax request.. You have many more options whih you can look up in jQuery Documentation .

The jsonp data you get in the callback look's like the one in the example..

Here result is a object .. You generally use . notation or [] notation to access the result.

To get the data inside meta you use result.meta.status To get the data inside name you use result.response.blog.name

You can always use console.log( result.meta.status) to log the value onto the console.

Upvotes: 1

Peter Sobot
Peter Sobot

Reputation: 2557

The jQuery.Ajax function takes an optional function parameter success:

success(data, textStatus, jqXHR)

A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.

You could set this to your own function, which would automatically execute once the request succeeds - providing you with the entire JSON blob you receive as a normal Javascript object. In your case, you could get the status of the request at data.meta.status - or the name at data.response.blog.name.

Note that jQuery also allows for error handlers on Ajax requests, called automatically in a similar way: error(jqXHR, textStatus, errorThrown).

Example code:

jQuery.ajax({
    url: "http://api.tumblr.com/v2/blog/" + tumblrURL + "/info",
    data: {api_key: "MY_PRIVATE_API_KEY"},
    dataType: "jsonp",
    success: function(data, textStatus, jqXHR) {
        // Do whatever you'd like in here with your data
        console.log("Got a response from " + data.response.blog.name);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        // Do whatever you'd like in here with your ERROR data
        alert("Got an error: " + textStatus);
    }
});​

Upvotes: 1

Related Questions