JSFiddle - React, Tailwind, and code Playground

by sergey77

HTML

<script src="http://fetchclimate2staging5.cloudapp.net/Script/FetchClimate.Request.js"></script>
<div>
    <a id="getTemp" href="#">Click</a> to get relative humidity in Moscow
</div>
    <div id="output">
</div>

JavaScript

$(function() {

    $('#getTemp').on('click', function(e) {
        e.preventDefault();
        
        // Construct FetchClimate request
        var request = new FetchClimate.Request({
            spatial: new FetchClimate.ScatteredPoints(
                [ 55.77 ],  // Latitudes of points 
                [ 37.64 ]), // Longitudes of points
            temporal: new FetchClimate.TemporalDomain(
                [2000,2010], true, // Average for years 2000..2010
                [1,32,60,91,121,152,162,213,244,274,305,335,366], true,  // Monthly average
                [0,24], true), // Average for entire day
            variable:"relhum",
            serviceUrl: "http://fetchclimate2staging5.cloudapp.net"
        });

        request.perform().then( 
            function(response) { // Success handler for request gets data 
                response.getData([ "values", "sd" ]).then(
                    function(data) { // Success handler for data retrieved
                        var t = "";
                        for(var i =0;i<12;i++)
                            t += data.values[0][i].toFixed(2) + "&plusmn;" + data.sd[0][i].toFixed(2) + "<br/>";
                        $("#output").html(t);
                    },
                    function(error) { // Error handler
                        $("#output").text("Error retrieving data: " + error);
                    }                
                );
            },
            function(error) { // Error handler
                $("#output").text("Request failed: " + error);
            });

    });

});