Get objects from array with javascript

Question

I use an ajax call to get a array of objects from a php script; however, I'm not able to get the nested objects from it.

Here is what the openings object looks like:

Object
2014-01-11: Array[5]
   0: Object
      appointments: "0"
      name: "0"
      openings: "1"
      route_date: "2014-01-11"
__proto__: Object
1: Object
2: Object
3: Object
4: Object
length: 5
__proto__: Array[0]
2014-01-12: Array[5]
2014-01-13: Array[5]
2014-01-14: Array[5]
2014-01-15: Array[5]
2014-01-16: Array[5]
2014-01-17: Array[5]
2014-01-18: Array[5]



length; undefined appointment.js?ver=3.8:58
begin: 20140111 appointment.js?ver=3.8:59
end: 20140228

I have tried to use console.log("length; "+openings.length); to get the length of the original object returned, but it returns undefined.

Here is my code for the php function:

    function get_available_times()
{
    global $wpdb; 

    $begin = $_REQUEST['begin'];
    $end = $_REQUEST['end']; 
    /*get time slots*/
    $query = "
        SELECT DISTINCT routes.route_date, time_slots.name, time_slots.openings, time_slots.appointments
        FROM routes
        INNER JOIN time_slots ON routes.route_id = time_slots.route_id
        WHERE route_date
        BETWEEN {$begin}
        AND {$end}
        ORDER BY route_date, name
        "; 
    $time_slots = $wpdb->get_results($query);

    /*organize slots into array*/
    $openings = array(); 
    foreach($time_slots as $ts)
    {
        if(empty($openings))
        {
            $openings[$ts->route_date][$ts->name] = $ts; 
        }
        elseif (array_key_exists($ts->route_date, $openings)) 
        {
            $openings[$ts->route_date][$ts->name]=$ts; 
        }
        else
        {
            $openings[$ts->route_date][$ts->name] = $ts; 
        }
    }

    /*return results*/
    $result['openings'] = $openings; 
    $result['time'] = $time_slots;  
    $result['begin'] = $begin; 
    $result['end'] = $end; 
    $result['query'] = $query; 
    $result['type'] = "success"; 
    $result = json_encode($result);
    echo $result;
    die(); 
}

Here is the Javascript code I'm using:

$.ajax({
            type: "post",
            dataType: "json",
            url: ajaxurl, 
            data:{action: "get_available_times", begin: begin, end:end},
            success: function(response){
                if(response.type == "success"){
                    console.log("testing"); 
                    var openings = response.openings;
                    console.dir(openings);
                    console.log("length; "+openings.length); 
                    console.log("begin: "+response.begin);
                    console.log("end: "+response.end);


                }
            }
        });

The point of all this is that I want to be able to iterate through each of the dates and put values into HTML.

Answer 1

Well, it looks like you're getting an object with 5 properties formatted as a date, each with its own array value.

So, try something like this:

var refDate = new Date(2014, 01, 14);

$.each(response.openings, function(k, opening){

    var parts = k.split('-'), //split the date key
        date = new Date(parts[2], (parts[1] - 1), parts[0]); //parse it do a date

    // jump to next iteration if dates doesn't match
    if(refDate.getTime() !=== date.getTime()) return true;

    $.each(opening, function(k2, v){
        console.log(v.name);
    });
});

You should be able to map the values in to a custom result as well. This would give you all the names:

var result = $.map(response.openings, function(v){
     return $.map(v, function(v2){
         return { name: v2.name };
     });
});
console.log(result);