Help please: Wikipedia viewer won't work (intermediate front end challenge)

1

I’ve been staring at this for… what feels like a decade by now. And I simply don’t see it.

I’m quite bad at the whole API thing so if you do spot the mistake and you want to explain it to me: please imagine you’re talking to a very small child. :smiley:

If anyone could have a look, I would REALLY appreciate it!

https://codepen.io/erikpl/pen/brpbRR?editors=1010#0

This is the JS part of the code:

// The following code applies to the overlay search window.
function openSearch() {
    document.getElementById("overlay").style.width = "100%";
}

function closeSearch() {
    document.getElementById("overlay").style.width = "0%";
}

// The following code performs the search.
$("#overlaySearchButton").click(function() { 
  let searchTerm = $("#searchTerm").val();
  let url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&format=json&callback=?";

  $.ajax({ 
    type: "GET",
    url: url,
    contentType: "application/json; charset=utf-8",
    async: false,
    dataType: "json",
    success: function(data){ 
      $("#results").html("");
      for (i = 0; i < data[1].length; i++){ 
        $("#results").append('<li><a href=' + data[3][i]+'target="_blank">' + data[1][i] + '</a><p>' + data[2][i] + '</p></li>');
      }
    },
    error: function(errorAlert){ 
      alert("Oops, something went wrong. Please try again!");
    }
  });
});
2

Right, I think I’ve managed to establish that the problem is with my URL but I haven’t been able to fix it. Right now it’s like this:

let url = "https://en.wikipedia.org/w/api.php?format=json&action=query&origin=*&search=" + searchTerm + "&callback=JSON_CALLBACK";

And it invariably gives me the error message every time I search for something.

If someone could shed some light on this, that would be great. I’ve obviously tried reading different articles but I find the documentation regarding Wikipedia’s API’s incredibly confusing…

3

I did 3 things to make your code work:

1: I added an id to the form tag and changed your click handler to

$("#searchForm").on('submit', function(e){
  e.preventDefault();
  [YOUR CODE HERE]
});

This stops the page from reloading every time you try to send your form.

2: I changed your wikipedia url to this:

let url = "https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srprop=snippet&srsearch=" + searchTerm;

I used this in mine and copy/pasted it while debugging.

Quick tip: If you can’t past that url into the browser search bar and get your desired data back, it isn’t working. That’s how I usually start when working with APIs… get the right response, then build around it.

3: Notice that there’s no callback on that url? I removed it in favour of letting jQuery do the work. In your ajax call, I changed datatype to dataType: "jsonp",. This automatically adds the callback for you so you don’t have to worry about it.

And the rest is for you to try. :slight_smile:

You’ll have to look through the response and reformat your success call to get valid output.

Let us know if you have other questions.

2 Likes