JavaScript & jQuery parse JSON in loop

Question

Sorry about asking this, I can't get it to work even with looking at other questions...

I have a JSON output in "json.php", for example:

    [
       {"serverid":"1","servername":"Server One"},
       {"serverid":"2","servername":"Server Two"}
    ]

I have a script, to grab the data & parse it into a variable

var servers;
jQuery.get('json.php', function(data) {
     servers =    JSON.parse(data);
     jQuery('#servers').servers.servername
});

I have a div to output the results to:

<div id="servers"></div>

Whatever I try, I always get some kind of

"Uncaught TypeError: Cannot read property 'servername' of undefined" error.

I'd also like to look around the results, however I can't even get it to print atm.

Again sorry for another question like this

Answer 1

Don't you mean something like this? the jQuery object (which is a reference to your div) knows nothing about servername. Also, you'll need to iterate through the array of items in order to get them all:

servers = $.parseJSON(data);

$.each(servers, function(index, value) {
    $("#servers").text($("#servers").text() + " " + value.servername);
});

Fiddle: http://jsfiddle.net/H2RC2/1/

Answer 2

The error message is all you need. The jQuery('#servers') wrap the #servers div in the jQuery object. And this object has got no property such as servers.

Rather you could use:

    var servers = JSON.parse(data);
    var res = '';
    for(var i = 0; i<servers.length; i++){
        res = res + '<p>' + servers[i].servername +'</p>';
    }

    $('#servers').append(res);