Editar: tengo una demostración aquí
Quiero obtener datos de una API, agregarlos al constructor de una clase y luego hacer clic en el botón para mostrarlos en la página.
class Entry { constructor() { this.pages = []; } loadAllEntries(url) { fetch(url) .then((response) => response.json()) .then((data) => { this.pages = data; // this would do it autuomatically, it's not what I want //this.displayAllEntries("#notes-list"); }); } displayAllEntries(node) { let ul = document.createElement("ul"); ul.id = "display-list-note"; this.pages.map((page) => { let li = document.createElement("li"); li.innerText = page.title; ul.appendChild(this.createClickableItem(page)); }); document.querySelector(node).appendChild(ul); } createClickableItem(item) { let li = document.createElement("li"); li.innerText = item.title; li.addEventListener("click", () => { console.log(item.id); }); return li; } } const courses = new Entry(); courses.loadAllEntries("http://localhost:1338/courses?favorite=true"); // on some click I want to run courses.displayAllEntries("#notes-list"); ¡Pero displayAllEntries actúa como si loadAllEntries nunca se hubiera ejecutado!
más adelante quiero hacer algo como courses.deleteEntry(213) y cambiar el contenido del constructor (un tipo de cosa glorificado de lista de tareas pendientes)
Editar: tengo una demostración aquí
El toque más pequeño que arreglará esto es el siguiente:
loadAllEntries(url) { // just return, no further changes required return fetch(url) .then(...then const courses = new Entry(); const url = "http://localhost:1338/courses?favorite=true"; courses.loadAllEntries(url).then(() => { courses.displayAllEntries("#notes-list"); });Si los métodos subyacentes funcionan, esto funcionará.