Wikidata API via JS by hugolpz

script.js

/* 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);

index.html

<!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>

Wikidata-API-via-JS.markdown

Wikidata API via JS
-------------------
Live [JS Demo](http://codepen.io/hugolpz/pen/ByoKOK) by [Lopez Hugo](http://codepen.io/hugolpz)

A [Pen](http://codepen.io/hugolpz/pen/ByoKOK) by [Lopez Hugo](http://codepen.io/hugolpz) on [CodePen](http://codepen.io/).

[License](http://codepen.io/hugolpz/pen/ByoKOK/license).

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@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;
}

wikidata-api-via-js.markdown

Wikidata API via JS
-------------------
Live [JS Demo](http://codepen.io/hugolpz/pen/ByoKOK) by [Lopez Hugo](http://codepen.io/hugolpz)

A [Pen](https://codepen.io/hugolpz/pen/ByoKOK) by [Lopez Hugo](http://codepen.io/hugolpz) on [CodePen](http://codepen.io/).

[License](https://codepen.io/hugolpz/pen/ByoKOK/license).