Сайт погоды с Ajax, использующим API Open Weather Map, не возвращает данные

Я хочу создать веб-сайт, где, если я введу название города, я смогу увидеть температуру. Это мой код, но по какой-то причине он не работает! Пожалуйста помоги!

Сначала я покажу код JavaScript, а затем покажу код HTML.

$(document).ready(function(){
    $('#submitWeather').click(function(){
        var city = $("#city").val();
        if (city != ''){
            $.ajax({
                url: 'https://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" + "&APPID=xxx",
                type: "GET",
                dataType: "jsonp",
                success: function(data){
                    var widget = show(data);
                    $("#show").html(widget);
                    $("#city").val('');
                }
            });
        }else{
            $("#error").html('Field cannot be empty');
        }
    });
});
function show(data) {
    return "<h3><strong>Weather</strong>: "+ data.main[0].temp +"</h3>"
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<div class="row">
    <h3 class="text-center text-primary">Enter City Name</h3>
    <span id="error"></span>
</div>
<div class="row form-group form-inline" id="rowDiv">
    <input type="text" name="city" class="form-control" placeholder="City Name">
    <button id="submitWeather" class="btn btn-primary">Search City</button>
</div>
<div id="show"></div>

Кто-нибудь знает, что я сделал не так? Пожалуйста, дайте мне знать! Я использовал это видео для создания веб-сайта: https://www.youtube.com/watch?v=6imiFFeDIzE

Источник

2 ответа

Решение

В вашей функции шоу, он пытается получить data.main[0].temp, API Open Weather Map не определяет главное поле в виде массива, это просто объект. Так что удалите [0] часть, потому что это не массив, а просто объект.
Вы также вводите свой ключ в код, так что вы можете сбросить его.
Кроме того, вы пытаетесь выбрать поле ввода с именем city но вы на самом деле выбираете поле ввода с идентификатором city, которого не существует В элемент ввода добавьте атрибут с именем id со значением, являющимся city,

Источник

В дополнение к падению [0] вам также нужно назначить id='city' на вход. Вы используете JQuery $("#city").val() который подходил неопределенным. Я запустил тесты в Codepen и получил его работать. проверить это на codepen

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