Dentro de mi archivo userDB.json se ve así;
[{ "username": "john", "xp": 5 }, { "username": "jane", "xp": 0 } ] Dentro del archivo app.js ;
async function getUsers() { let url = 'userDB.json'; try { let res = await fetch(url); return await res.json(); } catch (error) { console.log(error); } } async function addUser(username){ let users = await getUsers(); let newUser = {"username": `${username}`,"xp": 0}; users.push(newUser); } addUser('testName'); async function renderUsers() { let users = await getUsers(); let html = ''; users.forEach(user => { let htmlSegment = `<div class="user"> <h2>${user.username} ${user.xp}</h2> </div>`; html += htmlSegment; }); let container = document.querySelector('.container'); container.innerHTML = html; } renderUsers(); Me gustaría enviar datos a mi base de datos local y guardarlos, luego me gustaría mostrar los elementos de la matriz de la base de datos en la pantalla. Pero cuando console.log los usuarios en la función addUser() agregó un elemento visible en la consola pero no se renderizó ni se guardó en un archivo local, ¿cómo hacerlo?
Lo que está haciendo en addUser() es obtener la matriz de su base de datos, mutándola insertando un nuevo elemento en ella, pero eso solo afecta la matriz específica que obtuvo, no la base de datos.
Para que esto funcione, debe realizar una solicitud post a un servidor que actualizaría su base de datos y luego llamar a renderUsers() para obtener los datos actualizados:
async function addUser(username) { let url = "/"; // ⚠️ whatever url that accept a post request let newUser = { username: username, xp: 0 }; await fetch(url, { method: "POST", body: JSON.stringify(newUser) }); renderUsers(); }