title: Cant access JSON from open weather api
body: <p>I want to build a small website where I can get the weather of a city. I get the response of the api, but cant display the temperature.</p>
  
  <p>Here is my js and html file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var api = "http://api.openweathermap.org/data/2.5/weather?q=";
  var apiKey = "secret key";
  var unit = "&amp;units=metric";
  var json;
  
  // start api call
  
  function apiCallUrl() {
      var city = document.getElementById('city').value;
      var url = api + city + unit + apiKey;
      /* var json_obj = JSON.parse(Get(url));
      console.log("this is the author name: "+json_obj.author_name); */
      console.log(url);
      jsonObj(url);
  }
  
  // create JSON Object
  
  function jsonObj(url) {
      json = $.getJSON(url);
      console.log(json);
      weather(json);
  }
  // print weatherdata
  
  function weather(json) {
      console.log(json);
      document.getElementById("temperature").innerHTML = json.main.temp;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="de"&gt;
  &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
     &lt;title&gt;Parkwetter&lt;/title&gt;
     &lt;meta name="description" content="Zusammenfassung des Inhalts"&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
     &lt;link href="style.css" rel="stylesheet" media="screen"&gt;
     &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;h1&gt;Parkwetter&lt;/h1&gt;
      &lt;/header&gt;
      &lt;main&gt;
          &lt;p&gt;Von welcher Stadt möchtest du das Wetter sehen?&lt;/p&gt;
          &lt;input type="text" id="city" value="Leipzig"&gt;&lt;/input&gt;
          &lt;button id="submit" onclick="apiCallUrl()"&gt;submit&lt;/button&gt;
          
  
          &lt;p&gt;Temperatur: &lt;span id="temperature"&gt;&lt;/span&gt; °C&lt;/p&gt;
      &lt;/main&gt;
      &lt;footer&gt;
  
          &lt;script src="script.js"&gt;&lt;/script&gt;
      &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Do you have any clues why my JSON is undefined and how to solve the problem?</p>