Acabo de empezar con Ajax, pero tengo un pequeño problema para entender si esto es posible. Tengo un archivo db.json que estoy recuperando con 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 } ] }La función Ajax en 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();Inmediatamente después, el archivo JSON debe enviarse a esta clase que luego debe iterar a través del archivo JSON y generar la información.
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>"); } }Inicialmente estaba usando "valores" de una matriz disponible localmente, pero ahora necesito obtener esta información del archivo JSON. ¿Alguna pista sobre lo que puedo hacer aquí?
Algunas observaciones:
XMLHttpRequest , sino la API de fetch . Y como parece que usa jQuery, incluso podría usar la función $.getJSON .Transactions tiene un constructor que toma las propiedades de una transacción, mientras que el método getTransactions está diseñado para manejar múltiples transacciones. Entonces, su clase está mezclando el concepto de una transacción y un conjunto de transacciones múltiples. Sugeriría dedicar la clase a una sola transacción, incluido un método que devuelva la representación HTML de una transacción.values no está definida. Con el cambio propuesto en el punto anterior, tendrías todo lo que necesitas en las propiedades de la instancia.id de un elemento HTML, entonces el selector debe tener un símbolo hash: $("#transactionDisplay")ready que puede vincular simplemente haciendo $(function () { .... } .Así es como lo codificaría:
$(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); } }