Wikipedia wiever, problem on getting JSON

Wikipedia wiever, problem on getting JSON
0.0 0

#1

Hey I am having issues with getting json from the link i generated. I have tried everything i found online. It was working for 10 minutes but now its not. I even don’t get any error on my console when i try to print json files on console. Just nothing. Here’s my codepen code. I have no idea what should i do.


#2

Try with this url. “https://en.wikipedia.org/w/api.php?action=opensearch&format=json&origin=*&search=YourSearchTerm


#3

I have tried at least 100 different url’s including yours. Nothing happens. I get no console errors on chrome. I get 404not found error on firefox. I checked my button functions. They work properly. I checked my url variables. They all are working as expected. I tried to get json with jQuery.ajax(), getJSON() and plain javascript. Nothing happens. URLs are working but i cant call them with my ajax methods.


#4

Yes, APIs are frustrating. They are confusing enough, and they are all different, they are often poorly documented, and they can change without warning.

The first thing I notice is the lack of a document ready block. All jQuery should be thusly wrapped so it doesn’t try to manipulate DOM elements that don’t exist yet.

Your choice of variable names confused me for a second. Your url is not a URL but is a search string. And youwiki is actually a URL. Naming variables is important. Always assume a stranger is reading your code.

And whenever I’m confused, I simplify. I am a big fan of simplicity. When I write code, I make simple changes and then test. This is especially true if I’m learning something.

I add the url string that I use and then simplified it down to the bare essentials to get us to a point of understanding:

 $(document).ready(function() {
  
  var searchTerm = 'apple'
  
  var wikiUrl = 'https://en.wikipedia.org//w/api.php' +
      '?callback=?' +
      '&action=opensearch' +
      '&profile=fuzzy' +
      '&limit=10' +
      '&prop=fileinfo' +
      '&format=json' +
      '&search=' + searchTerm

  $.ajax({
    url: wikiUrl,
    dataType: 'json',
    success: function(response) {
      console.log('response', response);
    },
    error: function(err) {
      console.log('Error:', err)
    }
  })
})

A working pen is here.


#5

Thank you alot for your kind response. I will put more effort to write readable code from now on. I understand api’s can be really tricky but this one is not. I put all the blame on my stupidity. I put straight 20 hours to fix the problem on that 5 lines of ajax code. Even after your help it doesn’t work. I even used exactly your sample. Still nothing happened. All am i doing is wrapping that code on click() function.
i tested the function. It works. I tested my wikiAPI. It works. And we are 100% sure your ajax code snippet works. When i put them together it just fails. I am reall edge of crying-literally. Can you please just tell me whats wrong with this code. Why its not displaying that array on console?

$(document).ready(function() {
  $("#sbmt").click(function() {
    var wikiUrl =
      "https://en.wikipedia.org//w/api.php" +
      "?callback=?" +
      "&action=opensearch" +
      "&profile=fuzzy" +
      "&limit=10" +
      "&prop=fileinfo" +
      "&format=json" +
      "&search=" +
      encodeURI($("input").val());

    $.ajax({
      url: wikiUrl,
      dataType: "json",
      success: function(response) {
        console.log(response[1]);
      },
      error: function(err) {
        console.log(err);
      }
    });
  });
});


#6

I don’t completely know why but I think the issue is with your form element in the HTML. Maybe someone smarter than me can explain why. There is no need for a form because your HTML is not submitting an AJAX call itself. I would remove it and get rid to the "type"s on the buttons - not needed. When I do this, it works for me:

<div class="container">
  <h1>Wikipedia Search Tool</h1>
    <input type="text" class="s-bar">
    <button id="sbmt">Search</button>
    <button id="btn">I Feel Myself Lucky</button>
  <div class="content-container">
  </div>
</div>

Let me know if that doesn’t work for you and I’ll put it into a pen.

The only other thing that I’d add is that I’d find a better name for the second button than “btn”.

I am reall edge of crying-literally.

Yup, we’ve all been there.


#7

Thanks for your reply. I am agree with your form element suggestion. I used preventDefault() function for that. And i finally found the problem. (After 2 days) I don’t get any response because there is access restriction on Wikipedia in my country(Turkey) at the moment. To fix that I used vpn. Final working code:

$(document).ready(function() {
  $("#sbmt").click(function(e) {
//This function for form elements
    e.preventDefault();
// Link is different because i am using vpn webpage here to get data from wikipedia. And yes its sad
    var wikiUrl =
      "https://gir.im/en.wikipedia.org//w/api.php" +
      "?callback=?" +
      "&action=opensearch" +
      "&profile=fuzzy" +
      "&limit=10" +
      "&prop=fileinfo" +
      "&format=json" +
      "&search=" +
      encodeURI($("input").val());

    $.ajax({
      url: wikiUrl,
      dataType: "json",
      success: function(response) {
        console.log(response[1]);
      },
      error: function(err) {
        console.log(err);
      }
    });
  });
});