Question

Currently I am using the following code to display parts of a JSON data file:

$.getJSON( 
    "json.json",
    function(data) {
        $.each(data.events, function() {
            $('#listings').append("<p>" + this['eventname'] + "</p><p>" + this['eventurl'] + "</p><p>" + this['dates[startdate]'] + "</p>");
        });
    }
);

This is part of a locally cached and created JSON file which I’m retrieving the data from.

"events": [
    {
        "eventid": "4419605",
        "facebookeventid": "",
        "eventname": "Mervi"
        "dates": {
            "startdate": "20120529010000",
            "enddate": "20121231235500",
            "timezone": "EDT"
        },
        "venue": {
            "venueid": "210795",
            "name": "On
            "venueimages": {
                "large": "",
                "small": ""
            }
        },
        "eventimages": [""],
        "prices": {
            "pricelow": "$195.00",
            "pricehigh": "$195.00",
            "pricedisplay": "$195.00"
        },
        "attractionList": [
            {
                "sequence": "0",
                "artist": "",
                "artistid": "7014411",
                "billing": "1.00",
                "genre": "Seminar/Lecture",
                "links": "",
                "media": ""
            },
            {
                "sequence": "1",
                "artist": "Families.",
                "artistid": "7014441",
                "billing": "0.75",
                "links": "",
                "media": ""
            },
            {
                "sequence": "2",
                "artist": "Se",
                "artistid": "7014451",
                "billing": "0.75",
                "links": "",
                "media": ""
            }
        ]
    },

I can access the eventname and the following key entries to produce the values in html (which is what I’m after) but when I want to display the venueid value, this is inside venue which inside the array. And eventimages which has an empty array, which too is inside the main array. What would be the right syntax to display the data here? Am i using the right JSON/AJAX menthod to display complicated JSON structures like this one? Thanks.

Answer 1

Given that you fix a few things that are broken in your current JSON object, you can access these properties by this.venue.venueid (just as you can use this.eventname rather than this['eventname']).

If you for some reason prefer the stringed notation, the equivalent would be this['venue']['venueid'] but I see no useful case for it here.

The problems in your JSON object are

• Missing comma after event name
• Unterminated string and missing comma after venue name