Not Able to Access Data in a Complex JSON Format

Not Able to Access Data in a Complex JSON Format

Can you please take a look at This Demo and let me know why I am not able to access to data in detail option of the JSON? what I would like to do is loading the firstName , lastName, and ageinto the list for each object.

var data = { "events": [{ "date": "one", "event": "", "info": "Copenhagen", "detail": [{ "firstName": "Sally", "lastName": "Green", "age": 27 }] }, { "date": "two", "event": "", "info": "Copenhagen", "detail": [{ "firstName": "Sally", "lastName": "Green", "age": 27 }] }, { "date": "three", "event": "", "info": "Copenhagen", "detail": [{ "firstName": "Sally", "lastName": "Green", "age": 27 }] }] }; for (p = 0; p < data.events.length; p++) { $("p").append(data.events[p].date); for (i = 0; i < data.events.detail.length; i++) { $("ul").append('<li>'+data.events.detail[i]+'</li>'); } }
<div class="container"> <p></p> <ul></ul> </div>