Live JS Demo by Lopez Hugo
A Pen by Lopez Hugo on CodePen.
<!DOCTYPE html> | |
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
<title>Wikidata API</title> | |
<meta name="viewport" content="width=device-width"> | |
<body> | |
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script> | |
<link href="style.css" rel="stylesheet" /> | |
<script src="script.js" type="text/javascript"></script> | |
<h3><b>Wikidata API & Wikipedia API for linguists: Principles & Demonstrations</b></h3> | |
<div id="anchor1"></div> | |
<hr> | |
<div id="anchor2"></div> | |
Note: queries are asynchronous, requests and injections may be in different order. | |
</body></html> |
/* PRINCIPLES ############################################ */ | |
// 1. API'S URL: | |
// 1a.Parts of the url: | |
wd = "https://www.wikidata.org/w/api.php?"; | |
wp = "https://en.wikipedia.org/w/api.php?"; // list of iso-code = ? ----------------< | |
aw = "action=wbgetentities" ; // rather wdpoint | |
aq = "action=query" ; // ?rather wppage | |
ts = "&sites=enwiki" ; // wd only&required. // list of wiki-code = ? --------------< | |
t = "&titles=" // target, wd|wp | |
i = "Dragon"; //item, wd|wp | |
// i_ht = "*~米字鍵~" ; // wdpoint|wppage -- +few data | |
// i_hs = "*~米字键~" ; // wdpoint: missing; wppage: redirect (confirmed) | |
// i_ht = "中國" ; // wdpoint|wppage -- +many data | |
// i_hs = "中国" ; // wdpoint: missing; wppage: redirect (idem) | |
l = "&languages=zh|zh-classical|zh-cn|zh-hans|zh-hant|zh-hk|zh-min-nan|zh-mo|zh-my|zh-sg|zh-tw|fr" ; // wdpoint only | |
ps = "&props=sitelinks|labels|aliases|descriptions" ; // wdpoint only | |
//sitelinks: all interwikis | |
//labels: title without _(tag), for l (languages) only | |
//aliases: label of redirect page | |
p = "&prop=extracts&exintro&explaintext&exsentences=10" ; // wppage only | |
r = "&redirects&converttitles" ; // wppage only | |
c = "&callback=?" ;// wd|wp | |
f = "&format=json" ;// wd|wp | |
//1b. Compose your url: | |
urlwd = wd+aw+ts+t+i+l+ps +c+f; // typical wd query | |
url = wp+aq +t+i +p+r+c+f; // typical wp query | |
// Examples print in console: | |
console.log("1. WD: "+urlwd); | |
console.log("2. WP: "+url); | |
/* translate *********************************************** */ | |
var wikidata_translate = function (item,isolang) { | |
var url = wd+aw+ts+t+item+l+ps +c+f, // typical wd query | |
iso = isolang+"wiki", | |
trad=""; | |
console.log(url); | |
$.getJSON(url, function (json) { | |
trad = json.entities[ Object.keys(json.entities)[0] ].sitelinks[iso].title; | |
console.log("1"+trad); | |
}) | |
//return trad +"y2"+toto; | |
}; | |
console.log(wikidata_translate("Dragon", "zh") /**/) | |
//1c. DOM injection: | |
//$("body").html('<a href="'+url+'">Link</a>.<br />'+ url); //publish the url. | |
// wd+i INconsistently provide variants. | |
/* DEMO ################################################## */ | |
/* 2. TEMPLATING ***************************************** */ | |
// 2a. Single query : | |
function WD(item) { | |
url = wp+aq+t+ item +p+r+c+f; console.log(url); | |
$.getJSON(url, function (json) { | |
var item_id = Object.keys(json.query.pages)[0]; // THIS DO THE TRICK ! | |
var extract = json.query.pages[item_id].extract; | |
var result = "<b>En :</b> <t>" + item + "</t> <b>⇒</b> " + extract; | |
$('#anchor1').append("<div>"+result+"</div>"); // append | |
}); | |
}; | |
WD("Dragon"); | |
// 2b. Single query (alternative code): | |
function WD_i(item) { | |
//var be = item | |
url_tpl = wp+aq+t+ item +p+r+c+f; | |
$.getJSON(url_tpl, function (data) { | |
$.each(data.query.pages, function (i, json) { // THIS DO THE TRICK ! | |
sent = json.extract.toString(); | |
result = "<b>En:</b> <t>" + item + "</t> <b>⇒</b> " + sent; | |
$('#anchor2').append("<div>"+result+"</div>");// append | |
}); | |
}); | |
} | |
WD_i("unicorn"); | |
/* LOOP ************************************************** */ | |
// 2c. LOOP on a list of existing articles | |
function WD_list(list) { | |
$.each(list, function (a, item) { | |
WD_i(item); | |
}); | |
} | |
var List = [ "Qilin", "Basilisk", "Biscione", "Chollima", "Cockatrice", "Dragon", "Enfield", "Garuda", "Griffin", "Keythong", "Harpy", "Lindworm", "Manticore", "Mermaid", "Pegasus", "Phoenix", "Salamander", "Sea-horse", "Sea-lion", "Turul", "Unicorn", "Wyver", "Yale"]; | |
WD_list(List); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
@import url(https://fonts.googleapis.com/css?family=Bangers); | |
@import url(https://fonts.googleapis.com/css?family=Allura); | |
t { | |
font-size: 1.3em; | |
font-family: Bangers; | |
} | |
b { | |
color: #F00; | |
font-family: Allura; | |
font-size: 1.3em; | |
} | |
div > div { | |
box-shadow: 0 0 0 15px #555; | |
border: 3px solid #333; | |
color: #333; | |
margin: 1em; | |
padding: 1em; | |
} |
Live JS Demo by Lopez Hugo
A Pen by Lopez Hugo on CodePen.