Odd array value issue

Question

This is crazy and I have no idea why!?

Here is my issue:

When i log calEvent.start I get the right date with the right time, but! when i log the obj calEvent, my start date do not display the time :(.

I do:

console.log('=======addNewEvent=========');
console.log('log of calEvent.start : ' + calEvent.start);
console.log('log of calEvent obj : ');
console.dir(calEvent);
console.log('========================');

and this is what I get:

console.log(calEvent.start)

Fri Oct 25 2013 12:30:00 GMT-0400 (EDT)

console.log(calEvent)

Object
    date: "2013-10-25"
    date_end: "2013-10-25"
    date_end_hour: "6:30 pm"
    date_start_hour: "5:30 pm"
    end: Fri Oct 25 2013 18:30:00 GMT-0400 (EDT)
    end_date: "2013-10-25"
    end_time: "18:30"
    id: 109
    location: "63"
    presettype: null
    repeat_type: "N"
    start: Fri Oct 25 2013 00:00:00 GMT-0400 (EDT)
    start_date: "2013-10-25"
    start_time: "17:30"
    time_zone: 4
    title: "s"
    type: "C"
    typeClass: "class"
    user_locations: null
    zipcode: "10023"

As you can see the calEvent.start display the right time 12:30:00 but calEvent display the time as 00:00:00

Any idea why this is happening? :(

NOTE: sorry about my english*

========================= [CODE THAT SET calEvent.start ] ==========================

eventSetEvent : function(calEvent, $event, $titleName, $typeName, $typeL) {           
 resetForm($dialogContent);

 $dialogContent.dialog({
    modal: true,
    title: $titleName,
    open: function() {
        $(".j-start-time").timepicker('setTime',  MAIN.calendar.from24To12(MAIN.calendar.getInfoFromDate().hours(calEvent.start) + ':'+ MAIN.calendar.getInfoFromDate().minutes(calEvent.start)) );
        $(".j-end-time").timepicker('setTime',  MAIN.calendar.from24To12(MAIN.calendar.getInfoFromDate().hours(calEvent.end) + ':'+ MAIN.calendar.getInfoFromDate().minutes(calEvent.end)) );
    },
    close: function() {
       $dialogContent.dialog("destroy");
       $('#calendar').weekCalendar("removeUnsavedEvents");
    },
    buttons: {
       save : function() {
            var x = new Date();
                time_zone = x.getTimezoneOffset() / 60;

            calEvent.id = id;
            id++;

            MAIN.calendar.validation();

            if( $typeL == 'C') {
                calEvent.typeClass = 'class';
            } 

            if( $typeL == 'P') {
                calEvent.typeClass = 'private';
            }

            if( $typeL == 'O') {
                calEvent.typeClass = 'available';
            }

            if( $('.error-field').doesExist() ) {
                $('.j-err-msg').fadeIn();
            } else {
                $('.j-err-msg').fadeOut();

                calEvent.date = MAIN.calendar.getInfoFromDate().year(calEvent.start) + '-' + MAIN.calendar.getInfoFromDate().month(calEvent.start) + '-' + MAIN.calendar.getInfoFromDate().day(calEvent.start);
                calEvent.date_end = $('.j-date').val() != '' ? $('.j-date').val() : MAIN.calendar.getInfoFromDate().year(calEvent.start) + '-' + MAIN.calendar.getInfoFromDate().month(calEvent.start) + '-' + MAIN.calendar.getInfoFromDate().day(calEvent.start);
                calEvent.date_end_hour = $('.j-end-time').val().toLowerCase();
                calEvent.date_start_hour = $('.j-start-time').val().toLowerCase();
                calEvent.end_date = $('.j-date').val() != '' ? $('.j-date').val() : MAIN.calendar.getInfoFromDate().year(calEvent.start) + '-' + MAIN.calendar.getInfoFromDate().month(calEvent.start) + '-' + MAIN.calendar.getInfoFromDate().day(calEvent.start);
                calEvent.end_time = MAIN.calendar.getInfoFromDate().hours(calEvent.end) + ':' + MAIN.calendar.getInfoFromDate().minutes(calEvent.end);
                calEvent.presettype = null;
                calEvent.repeat_type = $('.j-radio-repeat:checked').val();
                calEvent.start_date = MAIN.calendar.getInfoFromDate().year(calEvent.start) + '-' + MAIN.calendar.getInfoFromDate().month(calEvent.start) + '-' + MAIN.calendar.getInfoFromDate().day(calEvent.start);
                calEvent.start_time = MAIN.calendar.getInfoFromDate().hours(calEvent.start) + ':' + MAIN.calendar.getInfoFromDate().minutes(calEvent.start);
                calEvent.time_zone = time_zone;
                calEvent.title =  $('.j-title').val() ;
                calEvent.type = $typeL;
                calEvent.user_locations = null;
                calEvent.zipcode = $('.j-zipcode').val();

                MAIN.calendar.addNewEvent(calEvent);
                $calendar.weekCalendar("removeUnsavedEvents");
                $calendar.weekCalendar("updateEvent", calEvent);
                $(".ui-dialog-content").dialog("close");                            
            }
       },
       cancel : function() {
          $(".ui-dialog-content").dialog("close");
       }
    }
 }).show();

 $dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
},

You said: "As you can see the calEvent.start display the right time 12:30:00 but calEvent.start display the time as 00:00:00" how can it display two different times? — Hanlet Escaño, Oct 24 '13 at 22:45
sorry, typo : `calEvent.start` display the right time **12:30:00** but `calEvent` display the time as **00:00:00** — Latin-Creature Fuentes, Oct 24 '13 at 22:47
Can you show us the code that sets `calEvent.start` so we can see exactly what it is? — jfriend00, Oct 24 '13 at 22:51

Michael Geary · Accepted Answer · 2013-10-24T23:19:15.743

I suspect that you are being deceived by the JavaScript console.

When you log calEvent.start, it logs the actual value of that property at that time.

When you just log calEvent, it only shows you a single line, correct? And then you click the little arrow to expand the object listing, right?

What happens then is the debugger fetches the properties of the calEvent object at the time you expand it, not when you first called console.log(calEvent).

While I've got you, let's talk about how you can make your code a lot simpler. I'll just give one example: the lengthy function call MAIN.calendar.getInfoFromDate() appears 20 times in this function.

Unless there's some specific reason to do this, you should call the function once, save its return value in a variable, and then use that variable in those 20 places:

eventSetEvent : function(calEvent, $event, $titleName, $typeName, $typeL) {           
 resetForm($dialogContent);
 var info = MAIN.calendar.getInfoFromDate();

 $dialogContent.dialog({
    modal: true,
    title: $titleName,
    open: function() {
        $(".j-start-time").timepicker('setTime',  MAIN.calendar.from24To12(info.hours(calEvent.start) + ':'+ info.minutes(calEvent.start)) );
        $(".j-end-time").timepicker('setTime',  MAIN.calendar.from24To12(info.hours(calEvent.end) + ':'+ info.minutes(calEvent.end)) );
    },
    close: function() {
       $dialogContent.dialog("destroy");
       $('#calendar').weekCalendar("removeUnsavedEvents");
    },
    buttons: {
       save : function() {
            var x = new Date();
                time_zone = x.getTimezoneOffset() / 60;

            calEvent.id = id;
            id++;

            MAIN.calendar.validation();

            if( $typeL == 'C') {
                calEvent.typeClass = 'class';
            } 

            if( $typeL == 'P') {
                calEvent.typeClass = 'private';
            }

            if( $typeL == 'O') {
                calEvent.typeClass = 'available';
            }

            if( $('.error-field').doesExist() ) {
                $('.j-err-msg').fadeIn();
            } else {
                $('.j-err-msg').fadeOut();

                calEvent.date = info.year(calEvent.start) + '-' + info.month(calEvent.start) + '-' + info.day(calEvent.start);
                calEvent.date_end = $('.j-date').val() != '' ? $('.j-date').val() : info.year(calEvent.start) + '-' + info.month(calEvent.start) + '-' + info.day(calEvent.start);
                calEvent.date_end_hour = $('.j-end-time').val().toLowerCase();
                calEvent.date_start_hour = $('.j-start-time').val().toLowerCase();
                calEvent.end_date = $('.j-date').val() != '' ? $('.j-date').val() : info.year(calEvent.start) + '-' + info.month(calEvent.start) + '-' + info.day(calEvent.start);
                calEvent.end_time = info.hours(calEvent.end) + ':' + info.minutes(calEvent.end);
                calEvent.presettype = null;
                calEvent.repeat_type = $('.j-radio-repeat:checked').val();
                calEvent.start_date = info.year(calEvent.start) + '-' + info.month(calEvent.start) + '-' + info.day(calEvent.start);
                calEvent.start_time = info.hours(calEvent.start) + ':' + info.minutes(calEvent.start);
                calEvent.time_zone = time_zone;
                calEvent.title =  $('.j-title').val() ;
                calEvent.type = $typeL;
                calEvent.user_locations = null;
                calEvent.zipcode = $('.j-zipcode').val();

                MAIN.calendar.addNewEvent(calEvent);
                $calendar.weekCalendar("removeUnsavedEvents");
                $calendar.weekCalendar("updateEvent", calEvent);
                $(".ui-dialog-content").dialog("close");                            
            }
       },
       cancel : function() {
          $(".ui-dialog-content").dialog("close");
       }
    }
 }).show();

 $dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
},

There are additional simplifications you could make, but that will give you a place to start.

yeah, but `calEvent.end` works w/o problem. Is just the `calEvent.start` with in the obj that is having the problem... :( — Latin-Creature Fuentes, Oct 24 '13 at 22:58
Sure, that makes perfect sense. Sometime after you called `console.log(calEvent)` but before you clicked in the debugger to expand the object, some part of your code modified `calEvent.start` but did not modify `calEvent.end`. I see that `calEvent` is being passed into your `eventSetEvent` function as an argument. So what is `calEvent` then - a global variable? There must be some other part of your code that is modifying it. — Michael Geary, Oct 24 '13 at 23:05
but why will `calEvent.start` work? I'm logging them one after another... event is i log `calEvent.start` after loging `calEvent` I still get the right time... but with in the obj the time gets set to ***00:00:00** - doesn't makes sense at all! :( — Latin-Creature Fuentes, Oct 24 '13 at 23:09
`console.log(calEvent.start)` works because that logs the current value *immediately*. — Michael Geary, Oct 24 '13 at 23:10
Try this: `console.log( JSON.stringify(calEvent) );`. That will log a JSON string of the current values instead of the dynamic expansion I discussed. What shows up for `start` when you do that? — Michael Geary, Oct 24 '13 at 23:12
`console.dir()` display the same thing. and `console.log(calEvent)` display the wrong time. I think is something else. The obj can't change value by itself. :/ — Latin-Creature Fuentes, Oct 24 '13 at 23:12
yeah, `console.log( JSON.stringify(calEvent) );` display the right value... umm — Latin-Creature Fuentes, Oct 24 '13 at 23:14
Objects don't change values by themselves, but somewhere in your app you have code that modifies `calEvent.start` after you log it but before you expand the `calEvent` object interactively. That's why `console.log( JSON.stringify(calEvent) );` and `console.log( calEvent.start );` both display the correct value: They display the *current* value at the time of the call. — Michael Geary, Oct 24 '13 at 23:15
yeah, u gave me an idea! the problem is when i re-format the data to work with the silly backend stuff... thx for the help! — Latin-Creature Fuentes, Oct 24 '13 at 23:17
so moving first I do `$calendar.weekCalendar("updateEvent", calEvent);` and after i will do the update and call `GURU.calendar.addNewEvent(calEvent);`... thx! — Latin-Creature Fuentes, Oct 24 '13 at 23:18

Odd array value issue

1 Answers1