Repo: https://github.com/jquery/jquery

Using Jquery and the Wikipedia API to create a Wikipedia search web app

---

In this tutorial I will walk you through coding FreeCodeCamp’s Wikipedia viewer project. The project consists of creating a search bar that allows the user to search for a term which is sent to the Wikipedia API and returns relevant Wikipedia articles for the search. The project also includes a link that will direct the user to a random Wikipedia article.

This project will teach you the basics of sending an AJAX request to an API and displaying the data returned.

What you will learn:

• How to work with the Wikipedia API
• Making an AJAX request with Jquery
• Displaying Wikipedia articles from the API

Requirements:

• Jquery
• Wikipedia API

Difficulty:

• Easy to Intermediate

The Project:

The code in it’s entirety:

HTML file

Javascript file

Let's get started:

In our Javascript file we start our Jquery with :

$(document).ready(function(){

});

This ensures that our Jquery code doesn’t execute until the Document Object Model (DOM) is properly loaded. This helps us avoid any potential issues with the DOM and Jquery. The rest of our code in our Javascript file will be nested in this function.

The next function we call within our document.ready function is :

  $('#search').click(function(){
  
  })

This function uses the Jquery selector to select the HTML search element we created in our HTML file. We call the Jquery click function on this so that this function is called when the search button is clicked.

The next step is to create a variable with the Wikipedia API URL stored in it:

var url = "http://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&format=json&callback=?";

Query	What it does	Our Value
action	Tells the API what action we want	opensearch
search	Gives the API the term we are searching for	searchTerm variable we created
format	Tells the API what format the data should be in	json

After creating the url variable with our Wikipedia API endpoint stored in it the next step is to call the API via an AJAX call:

  $.ajax({
      type: "GET",
      url: url,
      async: false,
      dataType: "json",
      success: function(data){
        $('#output').html('');

        for(var i = 0; i < data[1].length; i++){
          $('#output').prepend("
+data[3][i]+">"+data[1][i] +"
"+data[2][i]+"
");
        };
      },
      error: function(errorMessage){
          alert("Error");
      }
    })

The AJAX request consists of several parts:

Parameter	What it does	Our Value
type	The type of request (GET or POST)	"GET"
url	The url we are sending the request to	url
async	Whether the request is asynchronous or not	false
dataType	The data type of the request	"json"
success	Function that handles what to do if the request is successful	success function
error	Function that handles what to do if the request is unsuccessful	error function

The success function that handles what to do in the event that the AJAX request is successful looks like this :

success: function(data){
        $('#output').html('');

        for(var i = 0; i < data[1].length; i++){
          $('#output').prepend("
+data[3][i]+">"+data[1][i] +"
"+data[2][i]+"
");
        };
      },

First the unordered list HTML element with the ID output is selected and we use the html method to set it to empty (‘’). Next a for loop is used to iterate through the JSON data we are retrieving from the API and then we use the prepend method to prepend the data we want and display it in the output unordered list in our HTML.

data[3] selects the links for each result, data[1] selects the title for each article, and data[2] selects the text content for each article.

The error function handles what we want to do in the event there is an error in our AJAX response :

 error: function(errorMessage){
          alert("Error");
      }

For the sake of simplicity we will launch a very basic alert message that lets us know there was an error.

At this stage in our code the AJAX request is able to send a request to the API and properly handle how to display the data. However, our search bar only works if we use the mouse to click on the search button. If we attempt to do a search and submit the search term by hitting the enter key on a keyboard nothing happens.

Let’s fix this with the keypress method:

$('#searchTerm').keypress(function(e) {
    if(e.which == 13) {
      $('#search').click();
    }
  })

First we select the search bar by selecting searchTerm and then we call the keypress method on it. Next the which method is used to to determine which key on the keyboard is being pressed. The number that represents the enter key on a keyboard is 13, so we use an if statement to determine if the enter key is being pressed. If the enter key is in fact being pressed then we call the click method on the search element and this submits the search the same way it would if we clicked the search button.

Our Javascript file is now finished and we have a fully functional search bar that allows the user to pull results from the Wikipedia API and properly displays them in an unordered list.

Wrapping up:

This concludes my tutorial on FreecodeCamp’s Wikipedia viewer project. I hope you learned how to work with the Wikipedia API and how to send out an AJAX request and display the retrieved JSON data with Jquery.

I did not include the CSS file for the styling of this project due to the fact that I wanted to focus primarily on the AJAX request and API. The full project, including the stylesheet, can be found here.

Me:

• Linkedin
• My site