Как записать данние с FileReader в переменную?

Question

Помогите понять как сделать запись данних из файла в переменную HTML

<input type="file" id="file">
<button id="load">Load JSON File</button>

JS

document.querySelector("#load").addEventListener("click", function() {
  let file = document.querySelector("#file").files[0]
  let reader = new FileReader()
  let data;
  reader.onload = function(event) {
    data = event.target.result
    // console.log(reader.result);
  }
  reader.readAsText(file)
  console.log(data); // в консоли undefined
})

Answer 1

Ваша ошибка в том , что ваш код не синхронен. Т.е. reader.onload выполняется не сразу и в это время код идёт дальше. data не успевает получить значения перед тем как вывестись в консоль.

Вот вам сразу два решения

1. Выводить внутри load

document.querySelector("#load").addEventListener("click", function() {
  let file = document.querySelector("#file").files[0]
  let data;
  let reader = new FileReader()
  reader.onload = function(event) {
    data = event.target.result
    // console.log(reader.result);
    console.log(data); 
  }
  reader.readAsText(file)
})

2. Сделать функцию load синхронной

document.querySelector("#load").addEventListener("click", async function() {
    /// функция у клика async обратите внимание
    let file = document.querySelector("#file").files[0]
let data;

////ваш код

data = await loadFile(file)

console.log(data)


})
function loadFile(file){
    return new Promise(resolve=>{
        let reader = new FileReader()
    reader.onload = function(event) {
        let data = event.target.result
        resolve(data)
    }
    reader.readAsText(file)
})

}