CODEWITHSUNDEEP
jqueryajaxjson
jagershark
jagershark

Reputation: 1241

$.jquery ajax returned data (json) displays as 'undefined'

Here I have a simple php script which displays some values from a database in json format.

$source = $_GET['source'];

$query = mysql_query("SELECT * FROM images WHERE big_thumb = '" . $source . "'");

$results = array();

while($row = mysql_fetch_array($query))
{
   $results[] = array(
      'title' => $row['title'],
      'date' => $row['upload_date'],
      'time' => $row['upload_time']
   );
}

$json = json_encode($results);

echo $json;

This displays fine, heres an output example:

[{"title":"Torus","date":"2012-04-04","time":"23:06:14"}]

Then when an image is clicked this jquery is called:

var image_src = $(this).attr("alt"); // <= This works fine

    $.ajax({
        url: 'inc/get_image_details.php',
        data: {source : image_src},
        dataType: "json",
        success: function(data)
        {
            title = data.title;
            alert(title);

            date = data.date;
            alert(date);

            time = data.time;
            alert(time);
        }
    });

However, the (title, date & time) variables display as 'undefined' in the alert box. I've tried multiple ways of implementing the ajax call and the same thing happens every time. It is the first time I've tried it alright but I can't figure it.

Upvotes: 8

Views: 42273

Answers (1)

Claudio Redi
Claudio Redi

Reputation: 68400

Your json string has an array format. You need to access the json object properties like this 

title = data[0].title;
alert(title);

date = data[0].date;
alert(date);

time = data[0].time;
alert(time);

If you control the json format and an array is not necessary, use a json object with this format.

{"title":"Torus","date":"2012-04-04","time":"23:06:14"}

In this case you can keep your code as it is now.

Upvotes: 23

Related Questions