Just starting out with Ajax but I am having a bit of an issue understanding if this is even possible. I have a db.json file that I am retrieving with 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 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();
Immediately after, the JSON file should be sent over to the this class that will then should iterate through the JSON file and output the 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 was using "values" from locally available array, but now need to get this information from the JSON file. Any hints as to what I can do here?
Some remarks:
XMLHttpRequest API, but the fetch API. And as you seem to use jQuery, you could even use the $.getJSON function.Transactions has a constructor that takes the properties of one transaction, while the getTransactions method is designed to deal with multiple transactions. So your class is mixing up the concept of one transaction and a set of multiple transactions. I would suggest dedicating the class to one transaction only, including a method that returns the HTML rendering of one transaction.values variable is not defined. With the change proposed in the previous point, you'd have all you need in the instance properties.id of an HTML element then the selector should have a hash symbol: $("#transactionDisplay") ready event handler which you can bind by just doing $(function () { .... }.Here is how I would code it:
$(async function () {
const response = await fetch("../titan-bank/db.json");
const obj = await response.json();
const transactions = obj.transactions.map(({date, description, type, amount}, i) =>
new Transaction(i + 1, date, description, type, amount)
);
$("#transactionDisplay").html(transactions.map(transaction => transaction.html()).join("<br><br>"));
});
class Transaction { // One instance is one transaction
constructor (id, date, description, type, amount) {
this.id = id; // let's define it here!
this.date = date;
this.description = description;
this.type = type;
this.amount = amount;
}
html() {
return "Transaction #" + this.id
+ " Date: " + this.date
+ " Description: " + this.description
+ "<br> Type: " + this.type
+ " Amount: $" + this.amount.toFixed(2);
}
}