How to use data parameter with ajax method for Wiki challenge

Hi All,

I’m getting close to dialing in how I should call for my data with the ajax method for Wiki API, but I had a question in terms of how to query the actual data I’m trying to get.

This is what I currently have…

    $.ajax ({
      type: 'GET',
      dataType: 'jsonp',
      url: 'https://en.wikipedia.org/w/api.php?action=query&titles=dog&prop=revisions|coordinates|pageimages|pageterms&format=json',
      success: function(data) {
        console.log(data.query.pages["4269567"].title);
      }
    }); // ajax

However, I read in the Wiki API guide that you can use the data parameter to query your data. I was thinking this might be beneficial so my url isn’t so ‘clunky’. So I tried this.

    $.ajax ({
      type: 'GET',
      dataType: 'jsonp',
      data: 'action=query&titles=dog&prop=revisions|coordinates|pageimages|pageterms&format=json', 
      url: 'https://en.wikipedia.org/w/api.php?',
      success: function(data) {
        console.log(data.query.pages["4269567"].title);
      }
    }); // ajax

And it didn’t end up working :frowning: I tried tinkering around with it and move some stuff around here and there, but nothing seemed to work.

Does anyone have any ideas, or am I using this completely wrong to begin with?

Thanks!

Judging by no responses I guess I’m way off on this lol

Could you provide your code in a CodePen or repository?

of course!

Thanks. You don’t need to include the question mark in the URL field when you have the query string in data.

$.ajax ({
      type: 'GET',
      dataType: 'jsonp',
      data: 'action=query&titles=dog&prop=revisions|coordinates|pageimages|pageterms&format=json', 
      url: 'https://en.wikipedia.org/w/api.php', // delete the ?
      success: function(data) {
        console.log(data.query.pages["4269567"].title);
      }
    });

Should work just fine :thumbsup:

Nice! It did work! So is that generally how I should set up the ajax request? As in, is this better practice compared to putting the whole whole URL in the URL parameter?

Meh. It’s not substantially easier to read and it doesn’t provide much of any benefit. An argument could be made for using the object notation instead of a string:

var ajaxData = {
    action: 'query',
    titles: inputFromForm,
    prop: 'evisions|coordinates|pageimages|pageterms',
    format: 'json'
}
$.ajax ({
      type: 'GET',
      dataType: 'jsonp',
      data: ajaxData,
      url: 'https://en.wikipedia.org/w/api.php'
})

But, again… meh. The best thing you can do is used the deferred object API instead of the callback function. These are more generally known as promises.

var ajaxData = {
    action: 'query',
    titles: inputFromForm,
    prop: 'evisions|coordinates|pageimages|pageterms',
    format: 'json'
}
$.ajax ({
      type: 'GET',
      dataType: 'jsonp',
      data: ajaxData,
      url: 'https://en.wikipedia.org/w/api.php'
})
.done(function(data) {
    console.log(data);
    // do stuff with the returned data
})
.catch(function(error) {
    console.error(error);
    // handle the error
})