How to extract data from Tumblr API (JSON)? - json

Question

I have set up a Tumblr account and registered my application to authenticate it.
Tumblr Documentation: http://www.tumblr.com/docs/en/api/v2
I understand the API outputs JSON like this:
{
"meta": {
"status": 200,
"msg": "OK"
},
"response": {
"blog": {
"title": "David's Log",
"posts": 3456,
"name": "david",
"url": "http:\/\/david.tumblr.com\/",
"updated": 1308953007,
"description": "<p><strong>Mr. Karp<\/strong> is tall and skinny, with
unflinching blue eyes a mop of brown hair.\r\n
"ask": true,
"ask_anon": false,
"likes": 12345
}
}
}
Thats fine, but the documentation ends there. I have no idea how to get this information and display it on my site.
I thought the way you would get it would be something like:
$.ajax({
url: "http://api.tumblr.com/v2/blog/myblog.tumblr.com/info?api-key=myapikey",
dataType: 'jsonp',
success: function(results){
console.log(results);
}
});
But this does nothing.
Can anyone help me out? Thanks

Answer 1

results is now the object you can use to reference the JSON structure. When you console.log the results object, it should appear in the Javascript developer console where you can explore the object tree.
The response object
So when your success callback receives the response, the following should be available to you:
results.meta.status => 200
results.meta.msg => "OK"
results.response.title => "David's Log"
results.response.posts => 3456
results.response.name => "david"
results.response.url => "http://david.tumblr.com/"
results.response.updated => 1308953007
results.response.description => "<p><strong>Mr. Karp</strong>.."
results.response.ask => true
results.response.ask_anon => false
results.response.likes => 12345
Writing to the page
If you actually want to see something written to your page you'll need to use a function that modifies the DOM such as document.write, or, since you're using Jquery, $("#myDivId").html(results.response.title);
Try this:
Add <div id="myDivId"></div> somewhere in the of your page, and
Add $("#myDivId").html(results.response.title); in your success callback function
$.ajax({
url: "http://api.tumblr.com/v2/blog/myblog.tumblr.com/info?api_key=myapikey",
dataType: 'jsonp',
success: function(results){
// Logs to your javascript console.
console.log(results);
// writes the title to a div with the Id "myDivId" (ie. <div id="myDivId"></div>)
$("#myDivId").html(results.response.title);
}
});

Answer 2

In the question code, the request type was not being set and it was being rejected by tumblr. The jsonp error response was printing-out. The code below correctly makes the jsonp request.
The key was specifying the type, and the dataType. Good Luck happy hacking. ;-)
$.ajax({
type:'GET',
url: "http://api.tumblr.com/v2/blog/jdavidnet.tumblr.com/info",
dataType:'jsonp',
data: {
api_key : "myapikey"
},
success:function(response){
console.log(response, arguments);
}
});

Answer 3

One way to write an object to the screen is to add an element containing its JSON representation to the page:
$.ajax({
url: "http://api.tumblr.com/v2/blog/myblog.tumblr.com/info?api-key=myapikey",
dataType: 'jsonp',
success: function(results){
$("body").append(
$("<pre/>").text(JSON.stringify(results, null, " "))
);
}
});
Here is a demonstration: http://jsfiddle.net/MZR2Z/1/