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:
- CSS FRAMEWORK: Bulma
- JS LIBRARY: ZEPTO.JS same as jQuery but lighter
What my code does:
- Return a random entry when I push button
- 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:
- 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.
- It calls the function getWikipedia() whith boolean true. I’m gonna explain latter function getWikipedia().
- Second Event:
- When I press key ENTER, I erase the content in the div with class .result-bg.
- After that, I affect var search with value of input.
- 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!')
}
})
}
- I init variable data
- 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.
- 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 TWITCH API.
You could find my work here: https://github.com/MaximilienMao/freecodecamp