Is My JsON Calling Too Long?

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