Excel upload & data verwerken (JSON)

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

Hoe staan we erin vandaag?

😒🙁😐🙂😃

Excel upload & data verwerken (JSON)

Wat hebben we vorige keer toegevoegd?

Waar wordt de app data opgeslagen?

const state = {

            transactions: [],

           subscriptions: [],

           budgets: []

}

Wat als we 100 transacties tegelijk willen toevoegen?

Excel bestand

   ↓

Inlezen (FileReader)

   ↓

XLSX → JSON

   ↓

Opslaan in state

   ↓

Renderen in app

Stap 1

   ↓

Stap 2

   ↓

Stap 3

 ↓

Stap 4

   ↓

Stap 5

Stap 1 - bestand uploaden

const file = fileInput.files[0];

Stap 2 - File reader gebruiken

const reader = new FileReader();

reader.onload = function(e) {

  const data = new Uint8Array(e.target.result);

};

Stap 3.1 - Omzetten naar Json

const workbook = XLSX.read(data, { type: "array" });

const sheet = workbook.Sheets[workbook.SheetNames[0]];

Stap 3.2

const jsonData = XLSX.utils.sheet_to_json(sheet);

Stap 4 - Data opslaan in state

jsonData.forEach(item => {

  state.transactions.push(item);

});

Stap 5 - Render

renderTransactions();

Belangrijke stap!!!

Excel → JSON → JavaScript → UI

Opdracht