0

I'm trying to make a weather web-based app using the OpenWeatherMap API. So far, all my code does is write the JSON file to the page, but I want to save the .getJSON call so I can manipulate it and use the information (such as temperature, wind, humidity) in different places.

Here's my code so far:

<!DOCTYPE html>
<html>
<head>
<title>Weather</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script> 

    function gettingJSON(){
        var city = document.getElementById('text').value;
        document.write("jquery loaded");
         $.getJSON(`http://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${my API key}`,function(data){
            document.write(JSON.stringify(data));
        });
    }
</script>
</head>
<body>
   <input type="text" id="text">
   <input type="submit" id="submit">
   <button id = "getIt" onclick="gettingJSON()" >Get JSON</button>
</body>

And here's the output that I normally get in the form of a web page:

jquery loaded{"coord":{"lon":-0.13,"lat":51.51},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":273.85,"feels_like":270.59,"temp_min":273.71,"temp_max":274.26,"pressure":1006,"humidity":92},"visibility":10000,"wind":{"speed":1.73,"deg":308},"clouds":{"all":0},"dt":1609436849,"sys":{"type":3,"id":2019646,"country":"GB","sunrise":1609401973,"sunset":1609430448},"timezone":0,"id":2643743,"name":"London","cod":200}

What do I need to do to make it so that I can save each bit of information and add it to a list or something to eventually make my web app? I want it to look something like this: https://medium.com/@andrewchandev/weather-api-47a44354b54b but I need a way to save the information into a variable or something.

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
sunny
  • 1
  • Do you just want to use this locally for yourself or are you actually wanting to serve up some widget on a website ultimately. If the latter you might look into Firebase (well Firestore to be specific). It's an easy way to store data. If local and just a couple days worth you could store it in what's called localStorage. Need more info. – Blujedis Dec 31 '20 at 18:08
  • Create an asynchronous function. Eg. `async function getCityWeather(city) { return await $.getJSON(\`...?q=${encodeURIComponent(city)}&...\`) }` (removing the callback), which allows you to use it like any other function returning a promise. `getCityWeather("Paris").then(weather => console.log(weather))`. This does require jQuery 3 since 1 and 2 do not offer promise support. See: [What is the difference between jQuery version 1, version 2, and version 3?](https://stackoverflow.com/questions/41605120/what-is-the-difference-between-jquery-version-1-version-2-and-version-3) – 3limin4t0r Dec 31 '20 at 18:12
  • If you are not familiar with promises you might want to read the [MDN - Using Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) guide first. – 3limin4t0r Dec 31 '20 at 18:17

0 Answers0