Htykuut

I am currently working on a website for my school assignment (Final Thesis for VWO which is the last year of middle school in the Netherlands) where I have a sidebar which is supposed to give me the current temperature thanks to the API that I got from OpenWeatherMap.

But after searching for a few hours I still have no clue how I'm supposed to do it.

I have just "learned" html and css within the last few days, so my knowledge with them is still at the bare minimum, and as I've understood it correctly I need javascript for this problem which I still do not completely understand either.

I currently have this code in my .html which I want to show the current temperature taken from the OpenWeatherMap API instead of the 6 degrees:

<a href="#" style="float:right;">Outside Temp: 6&#8451</a>

(Reason it's a link with no destination is because that looked better in the "sidebar" with bootstrap)

But I have no idea how I can change the 6℃ to the 276.01 kelvin which is the number I got from my API JSON website:

{"coord":{"lon":5.39,"lat":51.5},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04n"}],"base":"stations","main":{"temp":276.01,"pressure":1008,"humidity":69,"temp_min":275.15,"temp_max":277.15},"visibility":10000,"wind":{"speed":5.1,"deg":70},"clouds":{"all":90},"dt":1542749460,"sys":{"type":1,"id":5208,"message":0.0034,"country":"NL","sunrise":1542697565,"sunset":1542728514},"id":2759040,"name":"Best","cod":200}

So I've been browsing and searching around the web and in w3schools and tried to get the data from the API by using the following script according to w3schools:

function loadDoc() {

  var openweathermapapi = new XMLHttpRequest();

  openweathermapapi.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {

        var temperature = JSON.parse(this.responseText);

      document.getElementById("demo").innerHTML = this.responseText;

    }

  };





  openweathermapapi.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=Best&APPID=9c0299218db10c8423221d49842d8488", true);





  openweathermapapi.send();

}

After pressing a button that runs the loadDoc script I get the complete website, but I only want the "temp" part from the "main" variable and have no idea how to get it.

Thank you

PS: I completely understand it if you don't want to answer this as I probably am doing something completely wrong or searching in the wrong things. I probably have no reason to get help as I simply haven't learned enough about programming yet, and I don't know if those kinds of questions are even allowed as I haven't found anything about it in the FAQ

here's an example of getting current location's weather details

first get your current system's location using this

var getIP = 'http://ip-api.com/json/';

then, it returns you your location's details in json

THIS CODE GETS ENTIRE DATA ON LOCATION and sets it to your tag

var weatherjson = "";

var getIP = 'http://ip-api.com/json/';

var openWeatherMap = 'http://api.openweathermap.org/data/2.5/weather'

$.getJSON(getIP).done(function(location) {

    $.getJSON(openWeatherMap, {

        lat: location.lat,

        lon: location.lon,

        units: 'metric',

        APPID: 'APIKEY'

    }).done(function(weather) {



      //set temperature from json to your <a> tag

        $('#mytemp').text(weather.main.temp);

    })

})

Explanation of above code:-

the sample json returned

{

    "coord": {

        "lon": -122.08,

        "lat": 37.39

    },

    "weather": [

        {

            "id": 721,

            "main": "Haze",

            "description": "haze",

            "icon": "50n"

        },

        {

            "id": 711,

            "main": "Smoke",

            "description": "smoke",

            "icon": "50n"

        }

    ],

    "base": "stations",

    "main": {

        "temp": 11.84,

        "pressure": 1016,

        "humidity": 81,

        "temp_min": 10,

        "temp_max": 13.3

    },

    "visibility": 11265,

    "wind": {

        "speed": 1.13,

        "deg": 128.002

    },

    "clouds": {

        "all": 90

    },

    "dt": 1542782400,

    "sys": {

        "type": 1,

        "id": 471,

        "message": 0.003,

        "country": "US",

        "sunrise": 1542812064,

        "sunset": 1542848035

    },

    "id": 420006353,

    "name": "Mountain View",

    "cod": 200

}

The main column contains the degree of your own location named (TEMP)

"main": {

        "temp": 11.84,

        "pressure": 1016,

        "humidity": 81,

        "temp_min": 10,

        "temp_max": 13.3

    },

Now we need to show the TEMPERATURE on display level

<a href="#" id="mytemp" style="float:right;">Outside Temp: 6&#8451</a>

given an identity to your temperature containing anchor tag named ID which is "mytemp"

now find the ID and update the temperature

//set temperature from json to your <a> tag

            $('#mytemp').text(weather.main.temp);