JS / Jquery: Unable to access the properties of an object returned from an ajax call

Answer 1

To read properties on the data object, data.startDate and data["startDate"] should both work.

As pointed out by jaywon, the problem is that your data object is a string, not an object. You can confirm this by adding another console.log line, like this:

console.log(typeof data);

That will print out "string" instead of "object". You can print out properties of the string object in the normal way, for example the number of characters is:

console.log(data.length);

To get jQuery to parse the JSON for you, you need to either set the dataType property as described by jaywon, or include this content-type header when you serve up your json:

Content-Type:text/json

If you include this header from the server, then you're example code will print the correct properties to the console.

Finally, to add a row to your table, you need to append a table row instead of a plain text string, so you should change your var tr = ... line to this:

var tr = '<tr>' +
             '<td>' + data.startDate    +'</td>' +
             '<td>' + data.active       +'</td>' + 
             '<td>' + data.currentPrize +'</td>' +
         '</tr>';

Answer 2

Have you tried setting the dataType property of your $.ajax call so that your call knows what kind of response to expect? When you set the dataType property to json jQuery knows to parse the JSON response into an object, otherwise it doesn't know if you're receiving back a text string, HTML, or JSON, etc... from the server.

This confirms the data object is there and it has the correct properties. Actually, that only confirms that your data variable contains a string, it doesn't confirm that it's been parsed into an object with accessible properties.

Try this:

$.ajax({
            type: 'POST',
            url: "/admin/competition/add-competition",
            data: dataString,
            dataType: "json" //add this line
            success: function(data){ //only the data object passed to success handler with JSON dataType
                console.log(data);
                console.log(data.startDate);
                console.log(data[startDate]);
                console.log(data['startDate']);

                var tr = '\n\
                          '+ data["startDate"] +'\n\
                          '+ data.active +'\n\
                          '+ data.currentPrize +'\n\
                          ';
                $('#competition_table').find('tr:last').after(tr);

            },
            error: function(){
                alert('There has been an error, please consult the application developer.');
            }


        });

Alternatively, you can parse the JSON response yourself with an external script like JSON2.

Here is a good thread also with examples of further problems you may encounter with the server possibly not sending back the correct response header. jQuery won’t parse my JSON from AJAX query