Cannot read property 'indexOf' of undefined

Question

i'm trying to set different options for several datepickers in jquery. My code is looks like this:

{foreach $cart->getItems() as $item}
    {if $item->action->prereservation}
        var disableDates = new Array();
        {if $item->action->hasVariants()}
        disableDates[{!$item->id}] = {$disabledDates[$item->action->id][$item->idVariant]};
        {else}
        disableDates[{!$item->id}] = {$disabledDates[$item->action->id]};
        {/if}

        if (disableDates[{!$item->id}].length !== 0) {
            $(".datepicker_"+'{$item->id}').datepicker({
                maxDate: new Date('{!$item->action->voucherTo|date: Y-m-d}'),
                beforeShowDay: function(date){
                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    console.log(disableDates[{!$item->id}]) // result is undefined (but not for last iteration)
                    return [ disableDates[{!$item->id}].indexOf(string) == -1 ]
                }
            })
        } else {
            $(".datepicker_"+'{$item->id}').datepicker({
                maxDate: new Date('{!$item->action->voucherTo|date: Y-m-d}'),
            })
        }
    {/if}
{/foreach}

but if there is more than one item in foreach, my js console show error Cannot read property 'indexOf' of undefined for the first iteration, only last is good. Can anybody help me please?

In my code Im combining template system Latte and jquery.

This is my final code in browser:

var disableDates = new Array();
        disableDates[777955] = ["2014-07-25","2014-07-26","2014-07-27","2014-07-28","2014-07-29","2014-07-30","2014-07-31"];

        if (disableDates[777955].length !== 0) {
            $(".datepicker_"+'777955').datepicker({
                maxDate: new Date('2014-07-31'),
                beforeShowDay: function(date){
                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    return [ disableDates[777955].indexOf(string) == -1 ]
                }
            })
        } else {
            $(".datepicker_"+'777955').datepicker({
                maxDate: new Date('2014-07-31'),
            })
        }

Thanks for any advices

Riyal

Just before the return, do a console.log(disableDates[{!$item->id}]) _ My guess is, this evaluates to undefined – Fretted

we'll need your getItems function as well – Sun

i've edit my question with final code in browser – Riyal

@karthikr: you have right, but if i look into the final code in browser, it looks ok i think – Riyal

Answer 1

If you are doing that in a loop, you keep overriding the array!

var disableDates = new Array();
disableDates[123] = 123;
console.log(disableDates[123]);  //123

var disableDates = new Array();
disableDates[456] = 456;
console.log(disableDates[123]);  //undefined

Move the array declaration outside of the loop or check if it exists before creating a new Array.

Exile

But everytime in different indexes, because of $item->id, which is unique – Riyal

Answer 2

you can test the string first, then use indexOf, for example:

var mydate;
for(i=0; i<mydate.length; i++) {
    if( mydate[i] ) {
        if(mydate[i].indexOf("some") {
              alert("OK");
        }
     }
}

Oscoumbrian