OpenWeather APIの情報が表示されないFCC/Local Weather App/JSON情報

Question

私はfreeCodeCamp Local Weather App Zipline Challengeをやっていて、IP-Location APIを使用して自分の位置を抽出した場所に行きました。 Open Weather APIで場所を使用して地元の天気に関する情報を取得する。

私はこの作業を成功させ、ブラウザ（Chrome）の新しいタブでJSONリンクを開くと、JSONにすべてのオブジェクト/配列/情報が必要な/ etcが表示されます。

しかし、この情報をコンソールに記録したり、コールバック情報から特定の情報でhtml要素の内容を変更しようとしましたが、何も得られませんでした。どんなエラーでもない。

私はいくつかの研究を行い、私のcodepenでhttpsの代わりにhttpを使用しようとしましたが、それは問題を解決しませんでした。私もいくつかのYoutubeチュートリアルを試してみましたが、誰もこの問題に遭遇しませんでした。

私はcodepen（注：私は地元の天気予報アプリのAPIキーを削除）からの私のすべてのコードとコードスニペットが含まれている： 1チャレンジ情報自体：https://www.freecodecamp.com/challenges/show-the-local-weather

ここではいくつかの有用なリンクですなぜ私はAPIから取得する情報はHTMLで表示されません。私の質問をより明確にするために：http://ip-api.com/ 3.オープン天気API：https://openweathermap.org/current#geo

EDIT 2. IP APIは、私は私の場所を取得するために使用しましたjQuery関数で指定された要素？

$(document).ready(function() { 
 
     var city; 
 
     var countryCode; 
 
     
 
     $.getJSON("http://ip-api.com/json",function(data2){ 
 
      city = data2.city; 
 
      countryCode = data2.countryCode; 
 
      
 
      var api = "api.openweathermap.org/data/2.5/weather?q="+city+","+countryCode+"&APPID=MYKEYGOESHERE"; 
 
      $.getJSON(api, function(data3){   
 
      $("cityName").html(data3.city); 
 
      $("temperature").html(data3.temp); 
 
      $("weather").html(data3.weather[0].description); 
 
      }); 
 
     }); 
 
    }); 
 
    
 

body{ 
 
    color:#FFF; 
 
    background-color: #f4495d; 
 
} 
 
.mainContainer{ 
 
    margin:7% auto; 
 
    background-color: #ce2336; 
 
    width:50%; 
 
} 
 

 
h2{ 
 
    text-align:center; 
 
    font-size: 180%; 
 
} 
 

 
p{ 
 
    text-align:center; 
 
    font-size: 150%; 
 
}

<div class="mainContainer"> 
 
    <h2>The Local Weather APP</h2> 
 
    <div class="coordinates"> 
 
    <p id="data">something something</p> 
 
    </div> 
 
    <div class="one-Third"> 
 
    <p id="cityName">YourCity</p> 
 
    </div> 
 
    <div class="one-Third"> 
 
    <p id="temperature">TheTemperature</p> 
 
    </div> 
 
    <div class="one-Third"> 
 
    <p id="weather">TheWeather</p> 
 
    </div> 
 
    <img src="#"> 
 
</div>

Answer 1

大丈夫コメントをもとに、あなたがこれを行うには、あなたが作成しているHTMLを入力する必要があり、あなたは、特定の要素を満たすために「#」の文字を配置する必要があり、コードは

$(document).ready(function() { 
    var city; 
    var countryCode; 

    $.getJSON("http://ip-api.com/json",function(data2){ 
     city = data2.city; 
     countryCode = data2.countryCode; 

     var api = "api.openweathermap.org/data/2.5/weather?q="+city+","+countryCode+"&APPID=MYKEYGOESHERE"; 
     $.getJSON(api, function(data3){   
     $("#cityName").text(data3.city); 
     $("#temperature").text(data3.temp); 
     $("#weather").text(data3.weather[0].description); 
     }); 
    }); 

}です。