HISPARC API Demo

The following code example will generate a webpage which will use the HiSPARC API to get an up-to-date list of stations. It will then show a drop-down menu from which a station can be selected, once you have chosen a station you can click the `Get info` button to make Javascript get the station information.

HTML

<h2>Station info</h2>
<p id="station_list">Choose a station: </p>
<input type="submit" id="get_station" value="Get info">
<pre id="station_info"></pre>

CSS

body {
    font-family: sans-serif;
}

JavaScript

$(function() {
    // Get an up-to-date list of HiSPARC stations
    $.getJSON(
        'http://data.hisparc.nl/api/stations/',
        function(data) {
            // Create the drop-down menu
            var select = $('<select>');
            var id, name;
            for (var i in data) {
                id = data[i].number;
                name = data[i].name;
                select.append($('<option>').attr('value', id).text(id + ' - ' + name));}
            $('#station_list').append(select);});

    // Attach a function to the Get info button
    $('#get_station').on('click', function() {
        var id = $('#station_list').find('select').val();
        // Get info for selected station and display it in a nice way
        $.getJSON('http://data.hisparc.nl/api/station/' + id + '/',
                  function(data) {
                      $('#station_info').text(JSON.stringify(data, undefined, 4));
                  });
        });
    });