CODEWITHSUNDEEP
javascripthtmljsonapi
Stefan Berger
Stefan Berger

Reputation: 143

Cant access JSON from open weather api

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.

Here is my js and html file:

var api = "http://api.openweathermap.org/data/2.5/weather?q=";
var apiKey = "secret key";
var unit = "&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;
}
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Parkwetter</title>
   <meta name="description" content="Zusammenfassung des Inhalts">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="style.css" rel="stylesheet" media="screen">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <header>
        <h1>Parkwetter</h1>
    </header>
    <main>
        <p>Von welcher Stadt möchtest du das Wetter sehen?</p>
        <input type="text" id="city" value="Leipzig"></input>
        <button id="submit" onclick="apiCallUrl()">submit</button>
        

        <p>Temperatur: <span id="temperature"></span> °C</p>
    </main>
    <footer>

        <script src="script.js"></script>
    </footer>
</body>
</html>

Do you have any clues why my JSON is undefined and how to solve the problem?

Upvotes: 0

Views: 177

Answers (1)

Vivek
Vivek

Reputation: 1513

You need to pass function as second param to getJSON function as per api doc

Function prototype

jQuery.getJSON( url [, data ] [, success ] )

Here's working solution for the same - 

var api = "https://api.openweathermap.org/data/2.5/weather?q=";
var apiKey = "*secret*";
var unit = "&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) {
    $.getJSON(url, weather); //passed weather as second param
}
// print weatherdata

function weather(json) {
    console.log(json);
    document.getElementById("temperature").innerHTML = json.main.temp;
}
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Parkwetter</title>
   <meta name="description" content="Zusammenfassung des Inhalts">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="style.css" rel="stylesheet" media="screen">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <header>
        <h1>Parkwetter</h1>
    </header>
    <main>
        <p>Von welcher Stadt möchtest du das Wetter sehen?</p>
        <input type="text" id="city" value="Leipzig"></input>
        <button id="submit" onclick="apiCallUrl()">submit</button>
        

        <p>Temperatur: <span id="temperature"></span> °C</p>
    </main>
    <footer>

        <script src="script.js"></script>
    </footer>
</body>
</html>

Upvotes: 1

Related Questions