Javascript – Using weather API with JSON and JavaScript/jQuery

javascriptjqueryjsonopenweathermapweather-api

I've found this free weather API that gives you a forecast when you send an HTTP GET request – the forecast is delivered in JSON. A request could look like this:

Examples of JSON format:
Seaching by city name:
api.openweathermap.org/data/2.5/weather?q=London,uk
Seaching by geographic coordinats:
api.openweathermap.org/data/2.5/weather?lat=35&lon=139 Seaching by
city ID: api.openweathermap.org/data/2.5/weather?id=2172797

So the response you get back is obviously defined by the end of the url, where some variables are located.

I've seen that you can use the jQuery function getJSON() to create an object out of the text file you get with an HTTP GET request, and you can also use variables with it to change the url. For an example doing this:

var person = "john";
$.getJSON("https://graph.facebook.com/" + person, function(person){

    $.each(person, function(key, value){
        document.write(key+": "+value+"<br />"); 
    });
});

Gives the output

id: 779695190
first_name: John
gender: male
last_name: Chan
locale: en_US
name: John Chan
username: John

However, when I try to use this with the weather API it doesn't work – there is no output. (Doing it without url-variables here for simplicity.) The below code is how I thought it would be done (but apparantly not).

$.getJSON("api.openweathermap.org/data/2.5/weather?q=London,uk", function(forecast){
    var temperature = forecast.main.temp;
    document.write(temperature);
});

See the JSON structure for the forecast here: http://bugs.openweathermap.org/projects/api/wiki/Weather_Data

So basically my questions are: How would I append the url-variables to the weather-api-urls (and making sure the request can be both city name or coordinates)? And how would I access the retrieved data once I got it from the server?

Best Answer

first you can read the lat & long values or the zip code or city ID and then can append them by calling the functions which includes the ajax to call the api wrt to the given parameter.See below i have tried it using just the lat long values from the browser.after getting the results you can access them like any other json object.

function success(position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
    var timstp = position.timestamp;
    var myDate = new Date(timstp).toLocaleString();
    //console.log("Lat="+lat+"Long="+long+"timstp="+timstp+"date="+myDate); 

    $.ajax({
      url: "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long + "&appid=690660b930904f0cee1975853d5a2375",
      dataType: 'jsonp',
      success: function(results) {
        console.log(results);

   
      }
    });
}

Related Solutions

Javascript – How to upload files asynchronously with jQuery

With HTML5 you can make file uploads with Ajax and jQuery. Not only that, you can do file validations (name, size, and MIME type) or handle the progress event with the HTML5 progress tag (or a div). Recently I had to make a file uploader, but I didn't want to use Flash nor Iframes or plugins and after some research I came up with the solution.

The HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

First, you can do some validation if you want. For example, in the .on('change') event of the file:

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('max upload size is 1k');
  }

  // Also see .name, .type
});

Now the $.ajax() submit with the button's click:

$(':button').on('click', function () {
  $.ajax({
    // Your server script to process the upload
    url: 'upload.php',
    type: 'POST',

    // Form data
    data: new FormData($('form')[0]),

    // Tell jQuery not to process data or worry about content-type
    // You *must* include these options!
    cache: false,
    contentType: false,
    processData: false,

    // Custom XMLHttpRequest
    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        // For handling the progress of the upload
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
});

As you can see, with HTML5 (and some research) file uploading not only becomes possible but super easy. Try it with Google Chrome as some of the HTML5 components of the examples aren't available in every browser.

Javascript – Setting “checked” for a checkbox with jQuery

Modern jQuery

Use .prop():

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

DOM API

If you're working with just one element, you can always just access the underlying HTMLInputElement and modify its .checked property:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

The benefit to using the .prop() and .attr() methods instead of this is that they will operate on all matched elements.

jQuery 1.5.x and below

The .prop() method is not available, so you need to use .attr().

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Note that this is the approach used by jQuery's unit tests prior to version 1.6 and is preferable to using $('.myCheckbox').removeAttr('checked'); since the latter will, if the box was initially checked, change the behaviour of a call to .reset() on any form that contains it – a subtle but probably unwelcome behaviour change.

For more context, some incomplete discussion of the changes to the handling of the checked attribute/property in the transition from 1.5.x to 1.6 can be found in the version 1.6 release notes and the Attributes vs. Properties section of the .prop() documentation.