JSON не запускает API Key для приложения Weather

Question

Я делаю проект приложения погоды 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

Answer 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>