[jQuery] How to address JSON data once returned with getJSON ?

[jQuery] How to address JSON data once returned with getJSON ?


Hello,
I'm retrieving JSON data from my own domain but don't understand how
to access the data which is returned, I can see it from firebug. In
the example below I want to create a list of dates
My code is :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html><head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
    $.getJSON("readings.json",function(reply){
        alert("Got it back");
        $("#readings").append("<ul/>");
        $.each(reply.electricity.readings, function(i,reading){
            $("#readings,ul").append("<li>"+reading.when+"</li>")
        });
    });
});
</script>
<style>img{ height: 100px; float: left; }</style>
<title>Testing getJSON</title></head><body>
<div id="readings"></div>
</body></html>
accessing the json file:
({
        "electricity": [
            {
                "location":"Toulouse",
                "supplier":"Enercoop",
                "readings":[
                    {"when" :"20080101",
                     "value":"1000"
                    },
                    {"when" :"20080201",
                     "value":"2000"
                    }
                ]
            }
        ]
})
The console tells me "reply.electricity.readings is undefined"
Is the problem with my JSON structure ? If so , any pointers to a
recommended JSON explanation would be appreciated.
Best regards / Colm