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

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!

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 = "" + searchTerm + "&format=json&callback=?";

    type: "GET",
    url: url,
    contentType: "application/json; charset=utf-8",
    async: false,
    dataType: "json",
    success: function(data){ 
      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!");

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 = "*&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…

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){

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

2: I changed your wikipedia url to this:

let url = "" + 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.