Request.JSON

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

HTML

<div class='wrapper'>
    <p>JSON will be received in 1 second</p>
    <table>
    <thead>
        <tr>
            <th>Country</th>
            <th>Population</th>
        </tr>
    </thead>
    <tbody id="post">
    </tbody>
</table>
</div>

CSS

body {
    font-family: Helvetica, Sans, Arial;
}
table {
  background: #DDD;
}
thead tr {
  background: #9D9;
}
thead th {
  font-weight: bold;
}
tbody tr:nth-child(2n) {
  background: #CFC;
}
tbody tr:nth-child(2n+1) {
  background: #EFE;
}
th,
td {
  width: 100px;
  padding: 0.2em;
  text-align: center;
}

JavaScript

new Request.JSON({
    url: '/echo/json/',
    data: {
        json: JSON.encode({
            countries:
[{
    "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
  }]
        }),
        delay: 1
    },
    onSuccess: function(response) {
        show_response(response, $('post'));
    }
}).send();

show_response = function(obj, result) {
    $H(obj).each(function(v, k) {
        if(typeof v === 'object')
            v.each(function(sv, sk) {
                if(typeof sv === 'object')
                    var tr=new Element('tr').inject(result);
                    for(var fk in sv){
                        tr.appendChild(new Element('td', {
                            text: sv[fk]
                        }).inject(result));
                    }
            });
    });
    result.highlight();
};