As I delve into the world of Ajax, I find myself grappling with a particular issue - the feasibility. My current endeavor involves fetching data from a db.json file using Ajax.
{
"transactions": [
{
"date": "4/3/2021",
"description": "Electric bill",
"type": "Debit", "amount": 250.00
},
{
"date": "1/15/2022",
"description": "Venmo",
"type": "Debit",
"amount": 80.00
}
]
}
The Ajax function triggers on window.onload
window.onload = function () {
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
jsonObj = JSON.parse(this.responseText);
return jsonObj;
}
};
ajax.open("GET", "../titan-bank/db.json", true);
ajax.send();
Following this, the JSON file is expected to be transmitted to a specific class for iteration and subsequent display of information.
var transactions = new Transactions;
transactions.getTransactions();
var transactionDisplay = $("transactionDisplay");
class Transactions {
constructor (date, description, type, amount) {
this.date = date;
this.description = description;
this.type = type;
this.amount = amount;
}
getTransactions () {
for (let id of values) {
//adds index for each transaction
var index = values.indexOf(id) + 1;
//prints out array of transactions
transactionDisplay.innerHTML += ("<br>Transaction #" + index + " Date: " + id.date + " Description: "
+ id.description + "<br> Type: " + id.type + " Amount: $"
+ id.amount.toFixed(2) + "<br>");
}
}
Initially I relied on "values" from a locally accessible array, but now seek to extract such details from the JSON file. Any suggestions on how I can achieve this?