Request.JSON

sending a JSON request to the jsFiddle backend. Later on parse and display the data.

by MrPolywhirl

HTML

<div class='wrapper'>
    <p>JSON will be received in 3 seconds</p>
    <ul id='post'></ul>
</div>

CSS

body {
    font-family: Helvetica, Sans, Arial;
}
p, ul {
    padding: 10px;
}
ul {
    margin: 5px;
    border: 2px dashed #999;
}

JavaScript

new Request.JSON({
    url: '/echo/json/',
    data: {
        json: JSON.encode(getWorldPopulationData()),
        delay: 3
    },
    onSuccess: function(response) {
        show_response(response, $('post'));
    }
}).send();

show_response = function(countries, result) {
    Array.each(countries, function(country) {
        new Element('li', {
            text: country.name + ' -> ' + country.population
        }).inject(result);
    });
    result.highlight();
};

function getWorldPopulationData() {
    return [{
        "name": "WORLD",
        "population": 6916183000
    }, {
        "name": "More developed regions",
        "population": 1240935000
    }, {
        "name": "Less developed regions",
        "population": 5675249000
    }, {
        "name": "Least developed countries",
        "population": 838807000
    }, {
        "name": "Less developed regions, excluding least developed countries",
        "population": 4836442000
    }, {
        "name": "Less developed regions, excluding China",
        "population": 4284697000
    }, {
        "name": "Sub-Saharan Africa",
        "population": 831464000
    }, {
        "name": "AFRICA",
        "population": 1031084000
    }, {
        "name": "Eastern Africa",
        "population": 342595000
    }, {
        "name": "Burundi",
        "population": 9233000
    }, {
        "name": "Comoros",
        "population": 683000
    }, {
        "name": "Djibouti",
        "population": 834000
    }, {
        "name": "Eritrea",
        "population": 5741000
    }, {
        "name": "Ethiopia",
        "population": 87095000
    }, {
        "name": "Kenya",
        "population": 40909000
    }, {
        "name": "Madagascar",
        "population": 21080000
    }, {
        "name": "Malawi",
        "population": 15014000
    }, {
        "name": "Mauritius",
        "population": 1231000
    }, {
        "name": "Mayotte",
        "population": 204000
    }, {
        "name": "Mozambique",
       ...