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>
programmieren,
JavaScript,
JQuery
