Разбор и отображение значений из ответа JSON в HTML - PullRequest
Новая
       95

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

0 голосов
/ 06 декабря 2018

Я пытаюсь выяснить текущий город на основе координат, полученных из 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 Ответ

0 голосов
/ 06 декабря 2018

Вы, кажется, не знакомы с асинхронной природой вызова 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()

...