JSON не запускает API Key для приложения Weather
Я делаю проект приложения погоды FCC с использованием Open WeatherMap API. Я видел, что chrome создает проблемы, связанные с геолокацией по HTTP, поэтому я решил вместо этого использовать пользовательский ввод для почтового индекса.
$(document).ready(function(){
// var zipCode = "54901";
var key = "id=524901&APPID=24d9e7758a30704bbc766831845bcb5f";
$(".btn").on("click", function(){
var zipCode = document.getElementById("zipCode").value
var api = "api.openweathermap.org/data/2.5/weather?zip=" + zipCode + ",us" + "&" + key;
console.log("Before JSON"); //Works
console.log(api); //Copy & Paste into browser works
$.getJSON(api, function(data){
console.log("JSON fired"); //Doesn't Log
});
});
});
HTML
<div>
<h1>Weather App</h1>
<input id="zipCode" type="text" placeholder="53154" />
<button class="btn btn-primary" type="submit">Submit</button>
</div>
Пользовательский ввод дает действительный zipCode, и все работает, пока мой запрос на JSON. Это из-за того, что мой API не соединен правильно?
Мой кодовый блок: https://codepen.io/dylanmparks/pen/LyRyOP?editors=1011
1 ответ
Решение
$(document).ready(function(){
// var zipCode = "54901";
var key = "id=524901&APPID=24d9e7758a30704bbc766831845bcb5f";
$(".btn").on("click", function(){
var zipCode = document.getElementById("zipCode").value
var api = "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode + ",us" + "&" + key;
console.log("Before JSON"); //Works
console.log(api); //Copy & Paste into browser works
$.getJSON(api, function(data){
console.log("JSON fired => ", data); //Doesn't Log
}).fail(function(jqxhr, textStatus, error){
console.log('Error:', textStatus, error)
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h1>Weather App</h1>
<input id="zipCode" type="text" placeholder="94040" />
<button class="btn btn-primary" type="submit">Submit</button>
</div>