ajax request break in a do...while loop, is this possible

Question

I wanna retrieve json ajax data and put them in calendar cell. The cells of the month are dynamically generated by a do...while loop. I retrieve first the data before generating cells and I stock them in a array(myPref which contains date data).

While the cells are being generating I want to create in the cells a div element if the date in myPref matches with the date of the cell.

My problem is when I call the array in my do...while loop it is repeated as many times as there are days in the month. So it is impossible to use the data in myPref.

If someone can can help me he will save me. I am working on it for two weeks. thank you. Here is my code :

              // here  my ajax request start  
        var pref = {};
        pref.get = function (url, data, succes, error){
            var xhr = new XMLHttpRequest();
            xhr.open('GET',url);
            xhr.onreadystatechange = function(event){
                   //console.log(xhr.readyState)
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status <= 300){
                         /* console.log('Good...')
                         console.log(JSON.parse(xhr.responseText))
                          console.log(xhr.getAllResponseHeaders())*/
                        succes(xhr.responseText);
                    }
                    else{
                         //console.log("Bad Request !!!")
                        error(xhr.status,xhr.statusText, xhr);
                    }
                }
            };
            xhr.send();
        };

        pref.get('/preferences', null,succes, error);
         //console.log(pref.get)
        console.log(pref.get)
        var myPref = []
        function succes (data){
            var d = JSON.parse(data);
            for(var i=0;i<d.length;i++){
                var out = d[i].date
                myPref.push(out);
            }

        }
        function error(err){
            console.log(err)
        }

        //start to create the table
        var html = '<table id="tek" class="ui celled table">';

       // Write selected month and year
        html += '<thead><tr>';
        html += '<th colspan="7">' +"Calendrier" + '</th>';
        html += '</tr></thead>';



        // Write the header of the days of the week
        html += '<tr >';
        for(var i=0; i < this.JourSem.length;i++) {
                html += '<td class="ndays">' + this.JourSem[i] + '</td>';
        }
        html += '</tr>';

             // Write the days

        var i=1;
        do {
                var dow = new Date(y, m, i).getDay();
                    // If sunday, satrt the row
                if ( dow ==0) {
                        html += '<tr>' ;
                }
                        // if not sunday, write fisrt of the month
                        // write also the days of the previous month
                else if ( i == 1 ) {
                        html =html+ '<tr class="vak">';
                        var k = derJourDerMois - premJourMois+1;
                        for(var j=0; j < premJourMois; j++) {
                                html += '<td class="yow"><p>'+ '</p></td>';
                                k++;
                        }
                }
                     // Write the current day in the loop
                var chk = new Date();
                var chkY = chk.getFullYear();
                var chkM = chk.getMonth();
                if (chkY == this.anneeActuel && chkM == this.moisActuel && i == this.auj) {
                        html += '<td class="today" ><p>' + i +'</p></td>';console.log(chkM);
                }
                else {
                    html += '<td id="td" class="jour_normal"  >'
                    html += '<div class="blokp">' + i+' '+ this.Mois[m]+' '+this.anneeActuel + '</div>'; 
                    html += '<div class="events"><ul >'
                    var dato = this.anneeActuel+'-'+0+(this.moisActuel+1)+'-'+i;
                    myPref.forEach(function(el){
                        if(el==dato){
                           html+='<li class="pref"></li></ul></div></td>';
                        }
                    })
                }
// if Saturday, close the row
                if ( dow == 6 ) {
                        html += '</tr>';
                }
// If not Saturday, but last day of the selected month
// it will write the next few days from the next month
               else if ( i == derJourMois ) {
                        var k=1;
                        for(dow; dow < 6; dow++) {
                               html += '<td class="not-current"><p>' +   '<p></td>';
                               k++;

                        }
                }

                i++;
            }
            while(i <= derJourMois);

           // Close table
            html += '</table>';

           // Write HTML to the div
            document.getElementById(this.divId).innerHTML = html;
          };