(Beginner question) How do I get a specific data from an OpenWeatherMap API












1















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










share|improve this question























  • Just add &units=imperial to the end of your API request URL.

    – Caleb H.
    Nov 20 '18 at 22:56











  • 1) don't have your app ID visible in your question or someone will steal it, 2) to access parts of a JSON, use dot notation (w3schools.com/js/js_json_objects.asp) so it would be this.responseText.main.temp

    – ecg8
    Nov 21 '18 at 1:58













  • pls let me know if it worked

    – Yash Soni
    Dec 2 '18 at 19:38











  • I really appreciated the answer but sadly I didn't completely understand it and couldn't get it to work at the time. But my partner (our assignment was in groups) later got time and somehow got it working. So once again, thank you!

    – Roy Zhou
    Dec 5 '18 at 19:01
















1















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










share|improve this question























  • Just add &units=imperial to the end of your API request URL.

    – Caleb H.
    Nov 20 '18 at 22:56











  • 1) don't have your app ID visible in your question or someone will steal it, 2) to access parts of a JSON, use dot notation (w3schools.com/js/js_json_objects.asp) so it would be this.responseText.main.temp

    – ecg8
    Nov 21 '18 at 1:58













  • pls let me know if it worked

    – Yash Soni
    Dec 2 '18 at 19:38











  • I really appreciated the answer but sadly I didn't completely understand it and couldn't get it to work at the time. But my partner (our assignment was in groups) later got time and somehow got it working. So once again, thank you!

    – Roy Zhou
    Dec 5 '18 at 19:01














1












1








1








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










share|improve this question














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







javascript html openweathermap






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 20 '18 at 22:53









Roy ZhouRoy Zhou

61




61













  • Just add &units=imperial to the end of your API request URL.

    – Caleb H.
    Nov 20 '18 at 22:56











  • 1) don't have your app ID visible in your question or someone will steal it, 2) to access parts of a JSON, use dot notation (w3schools.com/js/js_json_objects.asp) so it would be this.responseText.main.temp

    – ecg8
    Nov 21 '18 at 1:58













  • pls let me know if it worked

    – Yash Soni
    Dec 2 '18 at 19:38











  • I really appreciated the answer but sadly I didn't completely understand it and couldn't get it to work at the time. But my partner (our assignment was in groups) later got time and somehow got it working. So once again, thank you!

    – Roy Zhou
    Dec 5 '18 at 19:01



















  • Just add &units=imperial to the end of your API request URL.

    – Caleb H.
    Nov 20 '18 at 22:56











  • 1) don't have your app ID visible in your question or someone will steal it, 2) to access parts of a JSON, use dot notation (w3schools.com/js/js_json_objects.asp) so it would be this.responseText.main.temp

    – ecg8
    Nov 21 '18 at 1:58













  • pls let me know if it worked

    – Yash Soni
    Dec 2 '18 at 19:38











  • I really appreciated the answer but sadly I didn't completely understand it and couldn't get it to work at the time. But my partner (our assignment was in groups) later got time and somehow got it working. So once again, thank you!

    – Roy Zhou
    Dec 5 '18 at 19:01

















Just add &units=imperial to the end of your API request URL.

– Caleb H.
Nov 20 '18 at 22:56





Just add &units=imperial to the end of your API request URL.

– Caleb H.
Nov 20 '18 at 22:56













1) don't have your app ID visible in your question or someone will steal it, 2) to access parts of a JSON, use dot notation (w3schools.com/js/js_json_objects.asp) so it would be this.responseText.main.temp

– ecg8
Nov 21 '18 at 1:58







1) don't have your app ID visible in your question or someone will steal it, 2) to access parts of a JSON, use dot notation (w3schools.com/js/js_json_objects.asp) so it would be this.responseText.main.temp

– ecg8
Nov 21 '18 at 1:58















pls let me know if it worked

– Yash Soni
Dec 2 '18 at 19:38





pls let me know if it worked

– Yash Soni
Dec 2 '18 at 19:38













I really appreciated the answer but sadly I didn't completely understand it and couldn't get it to work at the time. But my partner (our assignment was in groups) later got time and somehow got it working. So once again, thank you!

– Roy Zhou
Dec 5 '18 at 19:01





I really appreciated the answer but sadly I didn't completely understand it and couldn't get it to work at the time. But my partner (our assignment was in groups) later got time and somehow got it working. So once again, thank you!

– Roy Zhou
Dec 5 '18 at 19:01












1 Answer
1






active

oldest

votes


















0














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);





share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402805%2fbeginner-question-how-do-i-get-a-specific-data-from-an-openweathermap-api%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    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);





    share|improve this answer




























      0














      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);





      share|improve this answer


























        0












        0








        0







        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);





        share|improve this answer













        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);






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 21 '18 at 7:05









        Yash SoniYash Soni

        48510




        48510
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402805%2fbeginner-question-how-do-i-get-a-specific-data-from-an-openweathermap-api%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Guess what letter conforming each word

            Port of Spain

            Run scheduled task as local user group (not BUILTIN)