Javascript loop does not add object property

Question

follows my code

    var canvasEvents = new Object;  

    canvasEvents['05-30-2015'] = '<a href="#" target=_blank>CAMPEONATOS SUL-AMERICANOS DE ATLETISMO</a>';

    $.getJSON('http://www.atletismope.com.br/eventos/lista',  function(eventos) {

         $.each(eventos, function(index, evento) {

              canvasEvents["04-20-2015"] = '<a href="#" target=_blank>CAMPEONATOS SUL-AMERICANOS DE ATLETISMO</a>';
         });    

    });

    canvasEvents["04-25-2015"] = '<a href="#" target=_blank>CAMPEONATOS SUL-AMERICANOS DE ATLETISMO</a>';

When canvasEvents is added inside the looping does not work, but if we add outside the looping works. Why?

There is a plugin that uses this object, jquery.calendario.js. Assigning the object only works if I put an Alert out of the loop. Here is the code that is working. You can view the result in this url: http://www.atletismope.com.br/eventos/calendario

var canvasEvents = new Object;

$.getJSON('http://www.atletismope.com.br/eventos/lista',  function(eventos) {

    $.each(eventos, function(index, evento) {
        var data = evento.data;
        var data_f = data.substr(5,2) + '-' + data.substr(8,2) + '-' + data.substr(0,4);

        canvasEvents[data_f] = '<a href="#" target=_blank>'+ evento.titulo +'</a>';

    }); 

});

alert(canvasEvents); //nao funciona sem o alert

Answer 1

The $.getJSON is asynchronous. It makes a call to the server and the code after the $.getJSON continues to color. When the server responds only then the code that is inside $.getJSON is Corridor.

If you need to run code with that information $.getJSON returns (eventos)so you have to put the code inside the callback, which means inside this function:

 $.getJSON('http://www.atletismope.com.br/eventos/lista',  function(eventos) {

In other words, you can only use this canvas object with the data that is inserted via $.getJSON within itself $.getJSON, although it visually seems that the last line of your example will be the last to run.

Answer 2

The plugin call loaded the object before the $.getJSON twist, but for some reason if I gave an Alert to the object it forced the call to pick up the object loaded with the dates. Well what I did was put the plugin call inside the $getJSON and it worked. Thanks for the help.

    $.getJSON('http://www.atletismope.com.br/eventos/lista',  function(eventos) {

        $.each(eventos, function(index, evento) {
            var data = evento.data;
            var data_f = data.substr(5,2) + '-' + data.substr(8,2) + '-' + data.substr(0,4);

            canvasEvents[data_f] = '<a href="#" target=_blank>'+ evento.titulo +'</a>';


        }); 



    //alert(canvasEvents); //nao funciona sem o alert   

        var cal = $( '#calendar' ).calendario( {
            onDayClick : function( $el, $contentEl, dateProperties ) {
                for( var key in dateProperties ) {

                    console.log( key + ' = ' + dateProperties[ key ] );

                }
            },

            caldata : canvasEvents

        } ),

        $month = $( '#calendar-month' ).html( cal.getMonthName() ),
        $year = $( '#calendar-year' ).html( cal.getYear() );



        $( '#calendar-next' ).on( 'click', function() {

            cal.gotoNextMonth( updateMonthYear );

        });

        $( '#calendar-prev' ).on( 'click', function() {

            cal.gotoPreviousMonth( updateMonthYear );

        });

        $( '#calendar-current' ).on( 'click', function() {
            cal.gotoNow( updateMonthYear );
        });


        function updateMonthYear() {
            $month.html( cal.getMonthName() );
            $year.html( cal.getYear() );
        }
    });