Loop in javascript does not add object property

Question

Loop in javascript does not add object property

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

follow 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 it works. Why?

There is a plugin that uses this object, jquery.calendario.js. The assignment of the object only works if I put an alert outside the loop. Here is the code that is working. You can view the result in this url: link

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

javascript loop

asked by anonymous 15.04.2015 / 16:25

2 answers

Add DIV's with different ID's using Jquery Make text appear under the box

score 2 · Answer 1

The $.getJSON is asynchronous. It makes a call to the server and the following code to $.getJSON continues to run. When the server responds only then the code that is within $.getJSON is corridor.

If you need to run code with this information that $.getJSON returns ( eventos ) then you have to put the code inside the callback, ie within 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 appears that the last line of your example will be the last one to run.

score 0 · Answer 2

The plugin call loaded the object before the return of $ .getJSON, but for some reason if I gave an alert on 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 $ 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() );
        }
    });