Получение информации из API Open Weather

Question

Я пишу веб-приложение на Code Pen, которое принимает местоположение пользователя и отображает текущую местную погоду. Мне удалось получить широту и долготу, но я не могу извлечь нужную информацию JSON из вызова API.

Я анализирую это с AJAX, я думаю, что я сделал то, что просит Официальная Документация API, но это не работает, данные даже не отображаются на консоли. Я просмотрел много ответов, но не смог заставить его работать.

Я хотел бы добавить информацию внутри цитаты

if (navigator.geolocation) {
    //Return the user's longitude and latitude on page load using HTML5 geolocation API
    window.onload = function () {
    function getCurrentLocation (position) {
        
        latitude = position.coords.latitude;
        longitude = position.coords.longitude;
      
      console.log(latitude);
      console.log(longitude);

      $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=b7aaa3a349294d5706002e82df3de1ea&units=metric", function (data) {
        console.log(data);
        console.log(weather.main.temp);
        $(".city").append(name + " ");
        $(".temperature").append(temp + " ");
        $(".weatherdescription").append(field + " ");
            })
          
        };
    }
   
      navigator.geolocation.getCurrentPosition(getCurrentLocation);
    };
 

<h1 class="jumbotron" style="color:white"><em>The Weather Today</em></h1>

<div class="container-fluid">
  <div class = "row text-center">
  </div>
  <div id="weather" class = "row text-center">
    <div class = "col-xs-12 well message">
      <blockquote id = "raw_json">
        <div class="weatherbox">

      <strong class="city">{CITY NAME HERE}</strong>
    <br/>
      <span class="temperature">{X} °C</span>
    <br/>
      <span class="weatherdescription">{WEATHER DESCRIPTION HERE}</span>
        <br/>

    </div>
    </blockquote>
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      
    </div>
  </div>
</div>

Answer 1

Замените код javascript на приведенный ниже, и он должен работать.

if (navigator.geolocation) {
    //Return the user's longitude and latitude on page load using HTML5 geolocation API
    window.onload = function () {
        navigator.geolocation.getCurrentPosition(getCurrentLocation);

    }

}


function getCurrentLocation(position) {

    latitude = position.coords.latitude;
    longitude = position.coords.longitude;

    console.log(latitude);
    console.log(longitude);

    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=b7aaa3a349294d5706002e82df3de1ea&units=metric", function (data) {
        console.log(data);
        console.log(weather.main.temp);
        $(".city").append(name + " ");
        $(".temperature").append(temp + " ");
        $(".weatherdescription").append(field + " ");
    })

};

CODEPEN: https://codepen.io/azimjs/pen/KXybpa?editors=0011