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.

No, I want the value of the name value for each object in the date object, if that makes sense. For each of the days I need to put all the objects name values into the DOM. — BlackHatSamurai
– BlackHatSamurai, Commented Jan 11, 2014 at 11:30
@ArunPJohny that doesn't effect what I'm doing. And it doesn't work. What you say isn't correct — BlackHatSamurai
– BlackHatSamurai, Commented Jan 11, 2014 at 11:31
though the begin and end are variables holding some other key — Arun P Johny
– Arun P Johny, Commented Jan 11, 2014 at 11:36

Johan · Accepted Answer · 2014-01-11 11:53:57Z

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);

edited Jan 11, 2014 at 11:53

answered Jan 11, 2014 at 11:33

Johan

35.4k62 gold badges191 silver badges309 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

BlackHatSamurai Over a year ago

You are right in the structure. That is EXACTLY what I was looking for! Thank you for your help!

Johan Over a year ago

@Blaine Glad to help. I will add another solution that you might find useful in a sec.

BlackHatSamurai Over a year ago

Great! How would I get a specific set of dates. Say I wanted to get all the values for 20140114. How can I grab that object so I can iterate as you have in the second loop>?

Johan Over a year ago

@Blaine Are you taling about the route_date or the date keys?

BlackHatSamurai Over a year ago

I would want to get the date keys. When I created the array, I made it an associative array, with the thought that I would be using an array in JS, but that doesn't seem to be the case, so I'm a bit lost on how to get all the object for a particular date (date keys)

|

Collectives™ on Stack Overflow

Get objects from array with javascript

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related