How to use weather API to create my weather HTML page

Question

I want to code a page using HTML and CSS. I already designed it, but I'm lost since I don't know how to link it with the weather API to fetch the weather fot the selected city/country. Can anyone give me examples of how does the code go?

You'll have to look at the API documentation, which should tell you how to request the data from the service. We can't help you because you didn't tell us what the service is, and even if you did, we're not going to write the code for you. This site is for fixing problems with your code, not making it appear out of thin air. — AstroCB, Jun 15 '14 at 16:57
What kind of API are you using/looking for? Maybe you want to avoid PHP and use a JavaScript API? — Shi, Jun 15 '14 at 16:58
Weather specific api's are discussed [here](http://stackoverflow.com/questions/3363052/best-weather-apis-free-for-commercial-use?rq=1) — mseifert, Jun 15 '14 at 20:07
http://ahmadhammoud.com/wtest/weather.html let's say i have this design everytime someone selects a city it must give him the right weather tmp..
how can it be done and still let the weather temperature updated — user3671574, Jun 15 '14 at 21:14
@user3671574 You're going to need to learn basic JS and HTML; then, you're going to have to learn how to use APIs with JS and how to connect JS and HTML with jQuery or `getElement...()`. See the link in my answer below. — AstroCB, Jun 16 '14 at 00:03

AstroCB · Accepted Answer · 2014-06-16T00:04:40.070

You'll have to look at the API documentation, which should tell you how to request the data from the service. Without a link to it, we can't help you.

This should give you a general idea of how to use JSON and APIs with PHP, but if you're looking for a simple pulling mechanism to update the weather on your page, you don't need something that heavy: it doesn't need to be server-side.

I would recommend going with JavaScript on this one, which would go something like this:

var req = new XMLHttpRequest();
var url = "yourURL"; //it is important that you read the API docs for this, because some APIs require you to use your API key in your request

req.open('GET', url, true);
req.onload = function (e) {
    if (req.readyState == 4 && req.status == 200) {
        if (req.status == 200) {
            var response = JSON.parse(req.responseText); //response is now an object containing all of the data that the API gives you; again, you'll have to look at the API docs to see how that information is formatted
            //update your page here using response data
            }
        }
    }
};
req.send(null);

I also recommend completing How to use APIs with JavaScript.

Either way, you're going to get a JSON object in return, which is formatted like this:

var response = [
    {
        "name": "Australia",
        "website": "http://www.footballaustralia.com.au",
        "foundedYear": 1961,
        "address": "Locked Bag A 4071\nNSW 1235\nSydney",
        "homeStadium": "ANZ Stadium",
        "stadiumCapacity": 83500,
        "group": "B",
        "groupRank": 3,
        "groupPoints": 0,
        "matchesPlayed": 1,
        "wins": 0,
        "losses": 1,
        "draws": 0,
        "goalsFor": 1,
        "goalsAgainst": 3,
        "goalsDiff": "-2",
        "id": "16EF7687-2D69-473C-BFE7-B781D67752DC",
        "type": "Team"
    }, 
    {
        "name": "England",
        "website": "http://www.thefa.com",
        "foundedYear": 1863,
        "address": "PO Box 1966\nSW1P 9EQ\nLondon",
        "homeStadium": "Wembley Stadium",
        "stadiumCapacity": 90000,
        "group": "D",
        "groupRank": 3,
        "groupPoints": 0,
        "matchesPlayed": 1,
        "wins": 0,
        "losses": 1,
        "draws": 0,
        "goalsFor": 1,
        "goalsAgainst": 2,
        "goalsDiff": "-1",
        "id": "2EFCFEB2-EBF8-4628-B659-B00C49D93811",
        "type": "Team"
    },
    {
        "name": "Ghana",
        "website": "http://www.ghanafa.org",
        "foundedYear": 1957,
        "address": "South East Ridge\n19338\nAccra",
        "homeStadium": "Ohene Djan Sports Stadium",
        "stadiumCapacity": 35000,
        "group": "G",
        "groupRank": 2,
        "groupPoints": 0,
        "matchesPlayed": 0,
        "wins": 0,
        "losses": 0,
        "draws": 0,
        "goalsFor": 0,
        "goalsAgainst": 0,
        "goalsDiff": "+0",
        "id": "CCC66F75-7004-46E4-BB31-259B06A42516",
        "type": "Team"
    }
];

So, for instance, you'd access Australia's website with

response[0].website;

You can also use pure XML, but JSON is the most popular way to make API requests.

so does it mean that i have to learn JSON from 0? aren't there a quicker way or some ready codes that i could use? — user3671574, Jun 20 '14 at 21:36
JSON is just a simple way of formatting text; an example is what I've stored in `response` above. You'll have to read the API's documentation to see how it stores the data you're accessing. Where are you getting the weather data from? — AstroCB, Jun 20 '14 at 22:16
let's say im getting the API from http://www.wunderground.com/weather/api/ they're giving me a link just like a referral URL how can i use it to send and receive the weather updates — user3671574, Jun 25 '14 at 12:33
@user3671574 If the link is to their API in a JSON format, you can use the example I've provided above to pull data from the API for use in your application. — AstroCB, Jun 25 '14 at 14:00
Thanks, I'll provide you with my results after discovering what you wrote up there now that everything is clear thanks to you and your training link from codacademy. — user3671574, Jun 25 '14 at 14:14
@user3671574 I'm glad it helped. It would be great if you could [accept my answer](http://stackoverflow.com/help/accepted-answer) by clicking the grayed-out checkmark next to my post so that we both [gain reputation](http://stackoverflow.com/help/whats-reputation) and so future viewers know that this provided an acceptable answer to your question. Thanks! — AstroCB, Jun 25 '14 at 14:17
http://api.openweathermap.org/data/2.5/weather?q=tripoli,lebanon i'm not able to get elements from this page to use in my html page though i configured your code above to fit my needs.. — user3671574, Jun 25 '14 at 15:15
@user3671574 That's interesting: it appears that, while your API does allow cross-domain requests, it doesn't return the proper status codes despite the fact that it returns the right data. I'm not sure why it does that exactly, but you can remove the `if` statements from the `onload` handler and it should work fine. It's working [here](http://jsfiddle.net/AstroCB/FH5Kb/). — AstroCB, Jun 25 '14 at 15:28
your code returned something strange like [object object] i want at least to be able to pick a value from that request :/ — user3671574, Jun 25 '14 at 15:35
`[Object object]` is the JSON object. It is formatted as above, and you can see it if you go to the URL that you provided for the API. It is stored in `response`, so if you do (for example) `response.coord.lat` will give you the latitude. Here's a [demo](http://jsfiddle.net/AstroCB/FH5Kb/3/). — AstroCB, Jun 25 '14 at 15:39
THANK UUUUUUUUU! sorry for my stupidity but im new with JSON :D — user3671574, Jun 25 '14 at 15:52

How to use weather API to create my weather HTML page

1 Answers1