Home>
code
function csvData (dataPath) {
 // Read csv data
 // put that data in an array
}
function printData () {
 // Output the read data to HTML.
}
csvData (dataPath);
printData ();

Roughly, the code looks like this.
In order, it should read csv and then output it to HTML, but as a result of checking various things using log etc., it feels like doing printData () before putting csv data in the array. was.
As a result, you will get an error stating that there is no data in the array.

I wonder if I should use sleep as a last resort.This reference siteI used, but it didn't work.

Can anyone please tell me what to do to solve this problem? Thank you.

In response to your indication
code
const resultArray = [];// Prepare an array
const vocabPosition = [];// Word coordinates (number of occurrences, average rating)
const output_topic = document.getElementById ('topik_box');
const output_review = document.getElementById ("review_box");
const output_img = document.getElementById ("img_contener");
var topicNum;
function csvData (dataPath) {
    const request = new XMLHttpRequest ();// Read the file via HTTP
    request.addEventListener ('load', (event) =>{// Load and execute
        const response = event.target.responseText;// Returns the received text
        if (/ ^ csv \/result/.test (dataPath)) {//
          loadTopic (response);//
        } else if (/ ^ csv \/sumAveBag/.test (dataPath)) {//
          loadVocabPosition (response);
        }
    });
    request.open ('GET', dataPath, true);// Specify the path of csv
    request.send ();
}
// Put csv data in an array
function loadVocabPosition (data) {
  const dataString = data.split ('\ n');// Split with line breaks
  for (let i = 1;i<dataString.length;i ++) {// Skip the first line
      vocabPosition [i] = dataString [i] .split (',');
  }
}
// Put csv data in an array
function loadTopic (data) {
  const dataString = data.split ('\ n');// Split with line breaks
  for (let i = 1;i<dataString.length;i ++) {// Skip the first line
      resultArray [i] = dataString [i] .split (',');
  }
}
// Output the contents of the array in HTML
function printVocab () {// Print topic
    let insertElement ='';// Variable to display in the table tag
    topicNum = resultArray [1] .length/2;// Number of topics
    for (var i = 1;i<= topicNum;i ++) {//
      insertElement + = ""
      insertElement + = ""
      insertElement + = "";
      for (var j = 1;j<= outputWordsNum;j ++) {// Skip the first row
        insertElement + = "<p id = \" atrVoc_ "+ i +" _ "+ j +" \ ">";
        insertElement + = `${resultArray [j] [2 * i-1]}`;// Attribute
        insertElement + = "</p>";
        moveVocabPosition (resultArray [j] [2 * i-1], "atrVoc_" + i + "_" + j);
      }
      insertElement + = "";
      insertElement + = "";
      for (var j = 1;j<= outputWordsNum;j ++) {// Skip the first row
        insertElement + = "<p id = \" evaVoc_ "+ i +" _ "+ j +" \ ">";
        insertElement + = `${resultArray [j] [2 * i]}`;// Evaluation
        insertElement + = "</p>";
        moveVocabPosition (resultArray [j] [2 * i], "evaVoc_" + i + "_" + j);
      }
      insertElement + = ""
      insertElement + = "";
      insertElement + = "";
    }
    output_topic.innerHTML = insertElement;// Display
}
function moveVocabPosition (voc, vocid) {
  var vocabID = vocabPosition [1] .indexOf (voc);
  var element = document.getElementById (vocid);
  element.style.position ='relative';
  element.style.left = vocabPosition [vocabID, 1] +'px';
  element.style.top = vocabPosition [vocabID, 2] +'px';
}
csvData ('csv/sumAveBag.csv');
csvData ('csv/resultBag.csv');
printVocab ();

The problem isprintVocab ()Will read the array faster than it stores it in the array, so the error will result in the array being null.

  • Answer # 1

    (Cannot sleep)

    sleep is not required.
    The referenced site is about the sleep feature, but it only describes "functions that receive callback functions".

    function csvData (dataPath, callback) {
      // callback (result) in xhr.onload
    }
    function printData (data) {
      // Process data to dynamically update HTML
    }
    csvData (dataPath, printData);// Callback as the second argument

    After reading the dataPath, printData () is processed.
    Flow control by Promise can be rewritten later, so please think about callback processing first.