Wikipedia Viewer with explanation


#1

Hi folks,
This is my Wikipedia Viewer: https://codepen.io/cafezen/full/VzPbay/
Next, I’m going to explain my code. I’ve made some improvments, I hope that can help you.

Tools that I used:

  • JS LIBRARY: ZEPTO.JS same as jQuery but lighter

What my code does:

  1. Return a random entry when I push button
  2. Return the first 10 entries when I push ENTER with input values

My Code

Init Var

var url = "https://en.wikipedia.org/w/api.php";

var dataObjRandom = {
	action: "query",
	format: "json",
	prop: "extracts",
	titles: "Main+Page",
	generator: "random",
	grnnamespace: 0,
	origin: "*",
	exchars: 250
};
var dataObj = {
	action: "opensearch",
	format: "json",
	namespace: 0,
	origin: "*",
	limit: 10
};

I init var url, dataObjRandom and dataObj.

  • url is the url to use Wikipedia Api
  • dataObjRandom is params the we need to have the random entry.
  • dataObj is params that we use to have result of our searh input.

I don’t like to assign var with the complete complete url when javascript can do that so easily.
When you use API, you call first URL with PARAMS. There link by – ? --.Take a look on this complete url:

complete url: https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json
api url: https://en.wikipedia.org/w/api.php
params:action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json

It’s gonna be like this in javascript.

// params is a Object
var params = {
	action: "query",
	titles: "Main Page",
	prop: "revisions",
	rvprop: "content",
	format: "json"
};

Look the API documentation to know about role of params.
###two events ###


$('.random').on('click', function () {
	$(".result-bg").html("");
	getWikipedia(true);
});

$('.search').on('keypress', function (e) {
	if(e.keyCode === 13) {
		$(".result-bg").html("");
		var search = $(this).val();
		getWikipedia(null, search);
	}
});
  • First Event:
    1. When I click on the button with random class, I erase the content in the div with class .result-bg. I do that because, when I do a second call, the next result just append to previous one. So, I need to clean the div when I do a new random.
    2. It calls the function getWikipedia() whith boolean true. I’m gonna explain latter function getWikipedia().
  • Second Event:
    1. When I press key ENTER, I erase the content in the div with class .result-bg.
    2. After that, I affect var search with value of input.
    3. At the end, I call function getWikipedia() with variables null and value of .search

###Functions ###

function getWikipedia(rand, req) {
	var params;
	if (rand) {
		params = dataObjRandom;
	} else {

		params = dataObj;
		params.search = req;
	}
	$.ajax({
		type: "GET",
		url: url,
		dataType: "json",
		data: params,
		success: function (datas) {

			if (rand === true) {
				var pages = datas.query.pages;
				for (page in pages) {
					result(pages[page].title, pages[page].extract);
				}
			} else {

				for( var i = 0; i < datas[1].length; i++){
					result(datas[1][i], datas[2][i]);
					console.log(datas[1][i], datas[2][i]);
				}
			}

		},
		error: function (xhr, type) {
			alert('Ajax error!')
		}
	})
}
  1. I init variable data
  2. If this is a request for a random entries, I have to used Ojbect dataObjRandom. Else, this is a search request. So I use dataObj which I have added our search value to params search.
  3. I make an Ajax request to collect the JSON result. If ajax request is a success, I need to know if this is a random request or search request. Depending on the request, I display the corresponding result with function result() with 2 params title and content.

function result(title, content) {
	if (!content) {
		content = "No descriptions yet!"
	}
	var link = "https://en.wikipedia.org/wiki/";
	link += title.replace(" ", "_");

	var template = "<div class='content result'> <div class='title'>" + title + "</div>" + content + "<div class='subtitle'></div><div><a href=\"" + link + "\" class=\"button more\">see more</a></div>";
	
	$(".result-bg").append(template);	
}

It returns the result of ajax query and append the result on HTML file.

Conclusion

I hope that could help you a little bit. I’m sorry if my english isn’t perfect. If you need more explanation, it would be a pleasure to help you.

Now, I need to focus on the next work :smiley: TWITCH API.

You could find my work here: https://github.com/MaximilienMao/freecodecamp