How do I show the response of my Open Weather Map API query in my webpage?

Question

I want to display weather conditions of the city Morgins in a html page. How do I show the response of my query? I am testing from my own laptop in de Google Chrome Browser. This is what I have so far:

<!DOCTYPE html>
<html>
  <head>
    <title>Weather</title>
  </head>
  <body>

    <script> 
        
      function getWeather() {
        var url = 'http://api.openweathermap.org/data/2.5/forecast/daily?q=morgins&APPID=001b0f58045147663b1ea518d34d88b4&mode=xml&units=metric&cnt=10';
        loadJSON(url, gotData);
        
      }

    </script>

  </body>    
</html>

Now it's a blank page but I want to display some weather elements of this 10 day forecast eventually...

score 1 · Accepted Answer · answered Mar 31 '18 at 12:59

Your data should be returned in the form of JSON not xml. remove the mode as xml also i made few modifications as below to show data in div.

DEMO

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Setup</title>
</head>
<body>
  <div id="app"></div>
  <div id="parsed_json_api">
  </div>

  <script src="index.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <!-- https://home.openweathermap.org/api_keys -->
  <script>

    jQuery(document).ready(function($) {

      var parsedData = $('#parsed_json_api');

      $.ajax({
        url: "https://api.openweathermap.org/data/2.5/forecast/daily?q=morgins&APPID=001b0f58045147663b1ea518d34d88b4&units=metric&cnt=10",
        dataType: 'json',
   
        success: function (data) {
          data = JSON.stringify(data);
          parsedData.append('<div>'+data+'</div>');
        }
      });
    });
  </script>

</body>
</html>

How do I show the response of my Open Weather Map API query in my webpage?

1 Answers1