Sending array from PHP to javascript through ajax

Question

I have this php code to return many arrays to javascript through ajax.

<?php

ini_set('display_errors', 1);
error_reporting(E_ALL);

function get_events_data() {

    // load SimpleXML
    $nodes = new SimpleXMLElement('my_events.xml', null, true);

    $event_id = array();
    $channel_id = array();
    $channel_name = array();
    $channel_onclick = array();
    $event_site = array();
    $event_url = array();
    $start_date = array();
    $start_time = array();
    $end_date = array();
    $end_time = array();
    $event_notes = array();

    $n = 0;
    foreach($nodes as $node) 
    {       

        $event_id[$n] = $node['id'];               
        $channel_id[$n] = $node->channel['id'];
        $channel_name[$n] = $node->channel->name;
        $channel_onclick[$n] = $node->channel->onclick;
        $event_site[$n] = $node->event_site->name;
        $event_url[$n] = $node->event_site->url;
        $start_date[$n] = $node->start_date;
        $start_time[$n] = $node->start_time;
        $end_date[$n] = $node->end_date;
        $end_time[$n] = $node->end_time;
        $event_notes[$n] = $node->notes;
        $n++;
    }

    $return['event_id'] = $event_id;               
    $return['channel_id'] = $channel_id;
    $return['channel_name'] = $channel_name;
    $return['channel_onclick'] = $channel_onclick;
    $return['event_site'] = $event_site;
    $return['event_url'] = $event_url;
    $return['start_date'] = $start_date;
    $return['start_time'] = $start_time;
    $return['end_date'] = $end_date;
    $return['end_time'] = $end_time;
    $return['event_notes'] = $event_notes;

    echo json_encode($return);

}

echo get_events_data();

?>

On the javascript side I have this code to access the arrays.

    $.ajax({
        url: "get_events_data.php",
        type: "POST",
        dataType : 'json',
        data: { },
        cache: false,
        async: false,
        success: function (rdata) {
            var alert_data = 'event_id '+rdata.event_id[0]+'<br/>'+    
            'channel_id '+rdata.channel_id[0]+'<br/>'+
            'channel_name '+rdata.channel_name[0]+'<br/>'+
            'channel_onclick '+rdata.channel_onclick[0]+'<br/>'+
            'event_site '+rdata.event_site[0]+'<br/>'+
            'event_url '+rdata.event_url[0]+'<br/>'+
            'start_date '+rdata.start_date[0]+'<br/>'+
            'start_time '+rdata.start_time[0]+'<br/>'+
            'end_date '+rdata.end_date[0]+'<br/>'+
            'end_time '+rdata.end_time[0]+'<br/>'+
            'event_notes '+rdata.event_notes[0]+'<br/>';
            alert (alert_data);
        },
        error: function (request, status, error) {
            alert ("status "+status+" error "+error+"responseText "+request.responseText);
        },
});

When I print out the first element of each array on the javascript side, it shows as "object" doesn't show the value in that array. What is the right way of accessing the array data on the javascript side?

Answer 1

The answer to this question showed me how to do this. Reading a json encoded array in javascript

The json encoded rdata object returned from the PHP function could be read like this rdata.event_id[i]["0"]. Here is sample code for the objects within rdata.

 var event = rdata.event_id[i]["0"]+' '+
                    rdata.channel_name[i]["0"]+' '+
                    rdata.channel_onclick[i]["0"]+' '+
                    rdata.event_site[i]["0"]+' '+
                    rdata.event_url[i]["0"]+' '+
                    rdata.event_onclick[i]["0"]+' '+
                    rdata.start_date[i]["0"]+' '+
                    rdata.start_time[i]["0"]+' '+
                    rdata.end_date[i]["0"]+' '+
                    rdata.end_time[i]["0"]+' '+
                    rdata.event_notes[i]["0"]+' ';
                    $('#event_list').append(event);

Answer 2

Use this instead of your 'similar' code:

foreach($nodes as $node) 
{       
    $event_id[] = $node['id'];               
    $channel_id[] = $node->channel['id'];
    $channel_name[] = $node->channel->name;
    $channel_onclick[] = $node->channel->onclick;
    $event_site[] = $node->event_site->name;
    $event_url[] = $node->event_site->url;
    $start_date[] = $node->start_date;
    $start_time[] = $node->start_time;
    $end_date[] = $node->end_date;
    $end_time[] = $node->end_time;
    $event_notes[] = $node->notes;
}

Answer 3

In JavaScript, an associative array is pretty much an object. Your script is working correctly. Do a console.log() with your data and explore how it prints out in the console, then use that to access the data. You could also post up the JSON data in question and probably get more detailed answers.

Answer 4

you need to either echo

echo json_encode($return);

or

echo get_events_data();

better:

echo json_encode($return);
} // end of function

then next line

get_events_data();