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

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

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

Solution

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>