How can I execute one for-loop function, then call another function after the for-loop function is complete with a button?

Question

I am trying to run a function after parsing some CSV with Papaparse on button click. I can only make it work with two buttons which is not the best. I actually have some more code that will update the selected_csv array with push() method.

What I want to do is feed the selected-csv array to Papaparse for-loop and push() the results to combined_array, which is then use by the gentable function to append a table of images. I have tried async and wait thinking it would be as simple as adding async and wait in both function. But that didn't work at all.

Any help would be greatly appreciated. I have gotten this far by reading a lot of stackoverflow questions and modifying. But I can not seems to get the last bit to work.

 var combined_arrays = []; function update() { var selected_csv = ['https://raw.githubusercontent.com/letsnotmakejunk/flashcards/main/Adjectives%201%20(State)%20(with%20subtitles).csv', 'https://raw.githubusercontent.com/letsnotmakejunk/flashcards/main/Adjectives%202%20(Condition)%20(with%20subtitles).csv']; //parse each entry of array and gen cards for (let l = 0, n = selected_csv.length; l < n; l++) { Papa.parse(selected_csv[l], { download: true, delimiter: ",", skipEmptyLines: true, header: true, complete: function(result) { //let selected_data = result.data; combined_arrays.push(...result.data); } }); }; }; function gentable() { var comb = combined_arrays; var columns = 6, table = document.createElement('table'), tbody = table.appendChild(document.createElement('tbody')), tr, td, img; let display = document.getElementById("cards"); for (i = 0, l = comb.length; i < l; i++) { if (i % columns == 0) tr = tbody.appendChild(document.createElement('tr')); let card = document.createElement("div"); card.setAttribute('class', 'card'); let qimages = document.createElement('img'); qimages.setAttribute('class', 'qimages'); qimages.setAttribute('src', '../.assets/' + comb[i].value); tr.appendChild(document.createElement('td')).appendChild(card).appendChild(qimages) //.src = '../.assets/' + combined_arrays[i].value; } display.appendChild(table).setAttribute('class', 'card_table'); };

 <script src="https://unpkg.com/papaparse@5.3.2/papaparse.min.js"></script> <div id='cards'> </div> <button onclick='update()'> testing </button> <button onclick='gentable()'> gentable </button>

Answer 1

I hope this will be helpful, do you want to achieve this? So that the function update calls gentable. Let me know!

 var combined_arrays = []; function update() { var selected_csv = ['https://raw.githubusercontent.com/letsnotmakejunk/flashcards/main/Adjectives%201%20(State)%20(with%20subtitles).csv', 'https://raw.githubusercontent.com/letsnotmakejunk/flashcards/main/Adjectives%202%20(Condition)%20(with%20subtitles).csv']; //parse each entry of array and gen cards for (let l = 0, n = selected_csv.length; l < n; l++) { Papa.parse(selected_csv[l], { download: true, delimiter: ",", skipEmptyLines: true, header: true, complete: function(result) { //let selected_data = result.data; combined_arrays.push(...result.data); if (l + 1 === selected_csv.length) { gentable(); } } }); }; }; function gentable() { var comb = combined_arrays; var columns = 6, table = document.createElement('table'), tbody = table.appendChild(document.createElement('tbody')), tr, td, img; let display = document.getElementById("cards"); for (i = 0, l = comb.length; i < l; i++) { if (i % columns == 0) tr = tbody.appendChild(document.createElement('tr')); let card = document.createElement("div"); card.setAttribute('class', 'card'); let qimages = document.createElement('img'); qimages.setAttribute('class', 'qimages'); qimages.setAttribute('src', '../.assets/' + comb[i].value); tr.appendChild(document.createElement('td')).appendChild(card).appendChild(qimages) //.src = '../.assets/' + combined_arrays[i].value; } display.appendChild(table).setAttribute('class', 'card_table'); };

 <script src="https://unpkg.com/papaparse@5.3.2/papaparse.min.js"></script> <div id='cards'> </div> <button onclick='update()'> 2 in 1 </button>

Answer 2

Since I don't understand how to write promise and callback. I wrote a dumb setTimeout function instead. It will call a for loop, sleep a bit, parse the data, sleep a bit, then generate a table. This is not the good answer so please don't immitate.

function startFunctionsSeq() {
  combined_arrays.length = 0;
  setTimeout(removeold, 0);
  setTimeout(update, 100);
  setTimeout(gentable, 300);
  $('#game-board').attr('style', 'display: none')
}