CODEWITHSUNDEEP
jqueryapicallback
Eels Fan
Eels Fan

Reputation: 2063

Using JQuery Against StackOverflow API

I am trying to learn how to make JSON requests via JQuery. From my understanding of the StackExchange Docs, this is possible. However, I don't understand what some of my parameter values should be. For instance, imagine I'm trying to get the tag information for 'JSON' and 'JQuery'. Currently, I have the following:

var url = "/2.1/tags/JQuery,JSON/info?callback=?";
$.getJSON(url, function (tags) {
  alert(tags.length);
});

Currently, I have the following questions:

  1. What domain needs to be added to url?
  2. Do I need to pass a key? I registered my app with StackExchange apps, yet, I do not see how I add that information or if its even needed in this case.
  3. Is the format of my {Tags} replacement correct?

I'm trying to get a successful query to the tags endpoint so that I can learn make this type of request.

Thank you!

Upvotes: 0

Views: 85

Answers (2)

John Kroetch
John Kroetch

Reputation: 1143

Thanks Chamika!

I've taken your fiddle and expanded upon it a bit, so it's not just popping up an alert. It now iterates over the returned information and creates some markup showing the returned values.

http://jsfiddle.net/J6u5C/2/

var URL ="http://api.stackexchange.com/2.1/tags/jquery%3Bjson/info?site=stackoverflow";
$.ajax({
  dataType: 'json',
  jsonp: 'json',
  url: URL,
  success: function(val) {
    $.each(val, function(item, vals) {
       var my_div = $('body').append('<div>' + item + '</div>');
       if (item === 'items') {
            $.each(vals, function(idx, tag) {
                my_div
                   .append('<div class="tag">' + tag.count + ' : ' + tag.name + '</div>')
            });
        }
        else if (item === 'quota_remaining' || item === 'quota_max') {
            my_div
                .append('<div class="quota">' + vals + '</div>')
        }
        else if (item === 'has_more') {
            my_div
                .append('<div class="hasmore">' + vals + '</div>')
        }
    });
  },
  error: function(val) {
    console.log('error');
    console.log(arguments);
  }
});

Upvotes: 0

Chamika Sandamal
Chamika Sandamal

Reputation: 24302

Try following code,

var URL = "http://api.stackoverflow.com/1.1/tags/";
$.ajax({
    dataType: 'jsonp',
    jsonp: 'jsonp',
    url: URL,
    success: function(val) {
       alert(val.total);
    },
    error: function(val) {
        console.log('error');
        console.log(arguments);
    }
});

Read API documentation for more details about available APIs

http://jsfiddle.net/J6u5C/

UPDATE

See the updated sample based on the your comment http://jsfiddle.net/J6u5C/1/

var URL ="http://api.stackexchange.com/2.1/tags/jquery;json/info?site=stackoverflow";
$.ajax({
    dataType: 'jsonp',
    jsonp: 'jsonp',
    url: URL,
    success: function(val) {
       alert(val.items.length);
    },
    error: function(val) {
        console.log('error');
        console.log(arguments);
    }
});

And answers for your questions,

  • What domain needs to be added to url?

http://api.stackexchange.com

  • Do I need to pass a key?

No

  • Is the format of my {Tags} replacement correct?

Format is seperated by ;(semi colon) not the , (comma)

Upvotes: 1

Related Questions