JQuery Code wird in falscher Reihenfolge ausgeführt?

Guten Tag. Ich will einen Bar Chart generieren nachdem ich informationen bei einer API ausgelesen habe. Dies habe ich mir so vorgestellt, dass erstmal die daten ausgelesen werden, diese in ein array umgewandelt werden und dann der barchart generiert wird.

Gerade komme ich nicht weiter beim umwandeln zum Array. Die Funktion test() wird schon am direkt am anfang ausgeführt, obwohl noch nicht alle informationen zusammengestellt wurden. Was kann ich machen, damit test() erst nach dem start() vollständig ausgeführt wurde, ausgeführt wird?

Code:

var app = {};
			//a jQuery function that is directly called using jQuery is registered to be started after the page has finished loading
$(function() {
      start();
	  test();
});
        var arrayy = [];


        function start()
        {
            getLogDataKeys();   
        }
        
        //a function that retrieves a list of objects for owner logdata
        function getLogDataKeys()
        {
            $.getJSON("http://webtechlecture.appspot.com/cloudstore/listkeys?owner=logdata",
                      
                      function(data)//this function is called when the server answers its data
                      {
                        console.log(data)
                        if (data.length>0)
                        {
                            $.each(data,
                                   function(index,logEntry){//this function is called for each single object in the array named "data" (listobjects and listkeays answer an array, while get does not!)
                                        processLogEntry(logEntry);
                                    });
                        }
                      }
                        
                     );




        }
        
        //each logEntry is processed here
        //process & aggregate the data here
        function processLogEntry(aEntry)
        {
            $.getJSON("http://webtechlecture.appspot.com/cloudstore/get?owner=logdata&key="+aEntry.key,
                function(data)//this function is called when the server answers its data
                      {
                        var diena = data.app;
                        
                        if(app.hasOwnProperty(diena)){
                        var value= app[diena];
                        app[diena]= value+1;
                        }
                        if(!(app.hasOwnProperty(diena))){
                        app[diena] = 1;
                        }
                        console.log(aEntry);
                        
                    });
        }
    function test()
        {
                        Object.keys(app).forEach(function(key) { arrayy.push([key,app.key])});
                        console.log("HI");
        }
    google.charts.load('current', {packages: ['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawBarColors);
function drawBarColors() {       var data = google.visualization.arrayToDataTable([         arrayy       ]);

      var options = {
        title: 'Population of Largest U.S. Cities',
        chartArea: {width: '50%'},
        colors: ['#b0120a', '#ffab91'],
        hAxis: {
          title: 'Total Population',
          minValue: 0
        },
        vAxis: {
          title: 'City'
        }
      };
      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    } </script>

Answer 1

[VeryBestAnswers]

Du hast am Anfang diese Funktion:

$(function() {
    start();
    test();
});

Diese Funktion wird erst ausgeführt, wenn die Seite fertig geladen ist.

Später steht dieser Code:

google.charts.load('current', {
    packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawBarColors);

Dieser Code steht aber NICHT in einer Funktion, wird also sofort aufgerufen, und ruft auch gleich die Funktion drawBarColors auf. Zu diesem Zeitpunkt ist das Array arrayy noch leer.

Packe den Code, der den Bar Chart darstellt, in die Funktion zwischen $(...). So wird gewährleistet, dass es in der richtigen Reihenfolge ausgeführt wird.

Woher ich das weiß: Studium / Ausbildung – Informatikstudium

Comments

[Zeakles1]

Ich habe den Code angepasst. Die Reihenfolge ist jetzt richtig, jedoch wird der Barchart generiert während das Array noch leer ist und erst dann dann werden die api calls gemacht. Durch Console Log konnte ich sicherstellen, dass alles in der Richtigen Reihenfolge durchgeführt wird, aber der Barchart wird trotzdem generiert wo das Array noch leer ist

			var arrayy = [];
			var app = {};
			//a jQuery function that is directly called using jQuery is registered to be started after the page has finished loading
$(function() {
	  test();
	  		google.charts.load('current', {packages: ['corechart', 'bar']});
		google.charts.setOnLoadCallback(drawTitleSubtitle);


function drawTitleSubtitle() {
      var data = google.visualization.arrayToDataTable([
        arrayy
      ]);
 
      var options = {
        title: 'Population of Largest U.S. Cities',
        chartArea: {width: '50%'},
        colors: ['#b0120a', '#ffab91'],
        hAxis: {
          title: 'Total Population',
          minValue: 0
        },
        vAxis: {
          title: 'City'
        }
      };
      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(data, options);
	  }
	  
});


			


			$.getJSON("http://webtechlecture.appspot.com/cloudstore/listkeys?owner=logdata",
						  
						  function(data)//this function is called when the server answers its data
						  {
							console.log(data)
							if (data.length>0)
							{
								$.each(data,
									   function(index,logEntry){//this function is called for each single object in the array named "data" (listobjects and listkeays answer an array, while get does not!)
											processLogEntry(logEntry);
										});
							}
						  }
							
						 );


			
			//each logEntry is processed here
			//process & aggregate the data here
			function processLogEntry(aEntry)
			{
				$.getJSON("http://webtechlecture.appspot.com/cloudstore/get?owner=logdata&key="+aEntry.key,
					function(data)//this function is called when the server answers its data
						  {
							var diena = data.app;
							
						    if(app.hasOwnProperty(diena)){
							var value= app[diena];
							app[diena]= value+1;
							}
							if(!(app.hasOwnProperty(diena))){
							app[diena] = 1;
							}
							console.log(aEntry);
							
						});
			}
		function test()
			{
							Object.keys(app).forEach(function(key) { arrayy.push([key,app.key])});
			}

[Zeakles1]

@Zeakles1

Ok habe das Problem gerade mit

  setTimeout(function(){
        // doing async stuff
        console.log('task 1 in function1 is done!');
        dfrd1.resolve();
    }, 30000);
			return $.when(dfrd1).done(function(){
        // Both asyncs tasks are done
    }).promise();

gelöst

[VeryBestAnswers]

@Zeakles1

Das ist eine schlechte Idee (könnte bei langsamen Verbindungen fehl schlagen). Tue lieber den Aufruf von $.getJSON(...) ebenfalls in den Aufruf von $(...).