How to extract data from Tumblr API (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

There is nothing logged to your console? Seems to be working [here](http://jsfiddle.net/MZR2Z/). — Asad Saeeduddin, Jan 25 '13 at 02:47
@Asad yes I get that too. But I am unsure as to how to actaully write items to the screen — MeltingDog, Jan 25 '13 at 02:50
@MeltingDog, actually for the above method you only need a valid API key. the OAuth dance is required for User specific data. — jdavid.net, Jan 25 '13 at 03:03
@jdavid.net just checked the documentation. It says to use the OAuth as the API key — MeltingDog, Jan 25 '13 at 03:07
@MeltingDog, http://www.tumblr.com/docs/en/api/v2#blog-info , this shows that the authentication needed is just the **api key** or known as the **OAuth Consumer Key** — jdavid.net, Jan 25 '13 at 03:27

Workman · Accepted Answer · 2013-08-24T19:45:21.563

8

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); 
    }
});

edited Aug 24 '13 at 19:45

answered Jan 25 '13 at 02:58

Workman

1,196
1
16
28

2

Jut a note that api-key should be api_key in the URL string. :) – LNA Aug 24 '13 at 04:25
@LNA Whoops! Good catch =] Updated. – Workman Aug 24 '13 at 19:45
@Workman Is there a way to access the actual post data as well through this approach? As in to create a copy of the text within a post? – Zach Saucier Oct 15 '13 at 16:11
@Zeaklous Yeah! But it's a different resource (/posts instead of /info). Have a look at http://www.tumblr.com/docs/en/api/v2#posts, does that help? – Workman Oct 15 '13 at 19:49
1

Yes, I actually posted a question about the issue but my problem is solved now. Thanks though (: – Zach Saucier Oct 15 '13 at 19:52
@Zeaklous Good! This community is incredibly awesome. Glad you got it figured out! – Workman Oct 15 '13 at 20:00
This is a really bad example as it is missing so many things. For example the fact that if you are using jQuery, you will need to include the library before the script – JGallardo Dec 22 '16 at 09:39
@JGallardo Jquery example was from the original question. Please see OP. – Workman Aug 17 '17 at 22:18

jdavid.net · Answer 2 · 2013-01-25T04:39:36.993

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);
    }
 });

score 0 · Answer 3 · answered Jan 25 '13 at 03:14

0

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/

answered Jan 25 '13 at 03:14

Asad Saeeduddin

46,193
6
90
139

Cool thats great! But how would I go about displaying say the Title from that within an HTML tag? – MeltingDog Jan 25 '13 at 04:08

How to extract data from Tumblr API (JSON)?

3 Answers3

The response object

Writing to the page

Linked

Related