Разбор и отображение значений из ответа JSON в HTML

Я пытаюсь выяснить текущий город на основе координат, полученных из API геолокации HTML. Здесь я жестко запрограммировал координаты, но я не могу разобрать и получить текущий город.

API, который я использую для получения названия города, - Nominatim. Я не уверен, где я ошибаюсь с кодом.

<html>
<body>
    <!--<div><button name="locationdiv" onclick="getLocation()">Get Location</button> </div>-->
    <div><button name="citydiv" onclick="getCity()">Current City</button> </div>
</body>    
<script>


    function getCity(){

        const url = "https://nominatim.openstreetmap.org/reverse?format=json&lat=12.93&lon=80.17&zoom=18&addressdetails=1";
        const req = new XMLHttpRequest();
        req.responseType = 'json';
        req.open("GET", url, true);
        req.send();
        var jsonResponse = JSON.parse(req.responseText);
        var newElement2  = document.createElement("div");
        newElement2.innerHTML = Http.responseJSON.address.country;
        document.body.appendChild(newElement2);}

</script>
Источник

1 ответ

Решение

Похоже, вы не знакомы с асинхронной природой вызова AJAX. Вы не можете просто опубликовать звонок AJAX, а затем ожидать XMLHttpRequest возражать, чтобы все это иметь. Вам нужно определить функцию обратного вызова для события onreadystatechange в котором все действия должны происходить.

const url =
  "https://nominatim.openstreetmap.org/reverse?format=json&lat=12.93&lon=80.17&zoom=18&addressdetails=1";
const req = new XMLHttpRequest();
req.responseType = "json";
req.open("GET", url, true);
req.send();
req.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var jsonResponse = this.response;
    var newElement2 = document.createElement("div");
    newElement2.innerHTML = jsonResponse.address.country;
    document.body.appendChild(newElement2);
  }
}

Кстати, есть более современные подходы к вызовам AJAX, чем старый XMLHttpRequest, а именно fetch()

Источник
Другие вопросы по тегам