This drop-down manu of languages and countries works fine (on my server), but I feel like it can be simplified.
HTML:
< input type="text" list="langLi" >
< datalist id="langLi" ></ datalist >
Js:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
var keyL = JSON.parse(this.responseText)
var langLi = document.getElementById('langLi');
for (var i = 0; i < keyL.languages.length; i++) {
for (Object in keyL) {
langLi.innerHTML+= "<option value='" + keyL.languages[i].lang + "'>" + keyL.languages[i].country + "</option>";
}
}
}
else {
langLi.innerHTML = '<button title="error" onclick="window.location.reload()">this list of languages is are not available. Refresh?</button>';
}
}
xhr.open('GET', 'languages.json', true);
xhr.send(null);
JsON (exmple):
{
"languages":[
{"lang": "Chinese",
"country": "China",
"rank": 1},
{"lang": "Spanish",
"country": "Spain",
"rank": 2},
{"lang": "English",
"country": "United Kingdom",
"rank": 3},
]}
Thanks !