(Вопрос для начинающих) Как получить конкретные данные из API OpenWeatherMap

Question

В настоящее время я работаю над веб-сайтом для моего школьного задания (Final Thesis for VWO, который является последним годом средней школы в Нидерландах), где у меня есть боковая панель, которая должна показывать мне текущую температуру благодаря API, которыйЯ получил от OpenWeatherMap.

Но после поиска в течение нескольких часов я все еще не понимаю, как я должен это делать.

Я только что "выучил" html и css за последние несколько дней, поэтому мойзнание с ними все еще на минимуме, и, как я правильно понял, мне нужен javascript для этой проблемы, который я до сих пор не до конца понимаю.

В настоящее время у меня есть этот код в моем .html, который яхотите показать текущую температуру, взятую из API OpenWeatherMap вместо 6 градусов:

---

<a href="#" style="float:right;">Outside Temp: 6&#8451</a>

---

(причина, по которой это ссылка без пункта назначения, заключается в том, что она выглядела лучше в «боковой панели»)с начальной загрузкой)

Но я понятия не имею, как я могу изменить 6 ℃ на 276.01 Кельвина, это число, которое я получил с моего сайта API JSON:

---

{"coord":{"lon":5.39,"lat":51.5},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04n"}],"base":"stations","main":{"temp":276.01,"pressure":1008,"humidity":69,"temp_min":275.15,"temp_max":277.15},"visibility":10000,"wind":{"speed":5.1,"deg":70},"clouds":{"all":90},"dt":1542749460,"sys":{"type":1,"id":5208,"message":0.0034,"country":"NL","sunrise":1542697565,"sunset":1542728514},"id":2759040,"name":"Best","cod":200}

---

Итак, я просматривал и искал в Интернете и в w3schools и пытался получить данные из API, используя следующий скрипт в соответствии с w3schools:

---

function loadDoc() {
  var openweathermapapi = new XMLHttpRequest();
  openweathermapapi.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var temperature = JSON.parse(this.responseText);
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };


  openweathermapapi.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=Best&APPID=9c0299218db10c8423221d49842d8488", true);


  openweathermapapi.send();
}

---

AftПосле нажатия кнопки, которая запускает скрипт loadDoc, я получаю полный веб-сайт, но мне нужна только часть «temp» из переменной «main», и я не знаю, как ее получить.

Спасибо

PS: Я полностью понимаю, если вы не хотите отвечать на этот вопрос, потому что я, вероятно, делаю что-то совершенно неправильно или ищу неправильные вещи.У меня, вероятно, нет причин получать помощь, поскольку я просто еще недостаточно изучил программирование, и я не знаю, разрешены ли такие вопросы, поскольку я не нашел ничего об этом в FAQ

Answer 1

вот пример получения информации о погоде для текущего местоположения

сначала получите местоположение вашей текущей системы, используя эту

var getIP = 'http://ip-api.com/json/';

, затем она вернет вам информацию о вашем местоположении в json

Этот код получает все данные о расположении и устанавливает их для вашего тега

var weatherjson = "";
var getIP = 'http://ip-api.com/json/';
var openWeatherMap = 'http://api.openweathermap.org/data/2.5/weather'
$.getJSON(getIP).done(function(location) {
    $.getJSON(openWeatherMap, {
        lat: location.lat,
        lon: location.lon,
        units: 'metric',
        APPID: 'APIKEY'
    }).done(function(weather) {

      //set temperature from json to your <a> tag
        $('#mytemp').text(weather.main.temp);
    })
})

Объяснение вышеуказанного кода: -

образец JSON вернул

{
    "coord": {
        "lon": -122.08,
        "lat": 37.39
    },
    "weather": [
        {
            "id": 721,
            "main": "Haze",
            "description": "haze",
            "icon": "50n"
        },
        {
            "id": 711,
            "main": "Smoke",
            "description": "smoke",
            "icon": "50n"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 11.84,
        "pressure": 1016,
        "humidity": 81,
        "temp_min": 10,
        "temp_max": 13.3
    },
    "visibility": 11265,
    "wind": {
        "speed": 1.13,
        "deg": 128.002
    },
    "clouds": {
        "all": 90
    },
    "dt": 1542782400,
    "sys": {
        "type": 1,
        "id": 471,
        "message": 0.003,
        "country": "US",
        "sunrise": 1542812064,
        "sunset": 1542848035
    },
    "id": 420006353,
    "name": "Mountain View",
    "cod": 200
}

Основной столбец содержит степень вашего собственного местоположения с именем (TEMP)

"main": {
        "temp": 11.84,
        "pressure": 1016,
        "humidity": 81,
        "temp_min": 10,
        "temp_max": 13.3
    },

Теперь нам нужно отобразить ТЕМПЕРАТУРУ на уровне дисплея

<a href="#" id="mytemp" style="float:right;">Outside Temp: 6&#8451</a>

, учитывая идентичностьваша температура, содержащая тег привязки с именем ID, который является «mytemp»

, теперь найдите идентификатор и обновите температуру

//set temperature from json to your <a> tag
            $('#mytemp').text(weather.main.temp);