0

Estoy haciendo una "red social" y cada usuario tendria un archivo JSON, entonces, utilizando fetch() se leeria el JSON y se cargaria la informacion en distintos <div> con un id en el archivo HTML

Pero despues recorde... ¿Como hago para editar un archivo JSON y cargarle informacion nueva cuando por ejemplo el usuario la cambie?

Busque en youtube, google pero no encontre nada ¿Como podria hacerlo?

Codigo de la funcion de javascript para leer el JSON mediante fetch:

function loadUser() {

// Variables
var name = document.getElementById("name");
var age = document.getElementById("age");
var description = document.getElementById("description");

fetch('data.json')
    .then(respuesta => respuesta.json())
    .then(respuesta => {
        name.innerHTML = `
            <p><b>Nombre: </b> ${respuesta.name}</p>
        `
        age.innerHTML = `
            <p><b>Edad: </b> ${respuesta.age}</p>
        `
        description.innerHTML = `
            <p><b>Descripcion: </br></b> </br>${respuesta.description}</p>
        `
    })
    .catch(error => alert("Ha ocurrido un error (" + error.message + ")"))
}

El JSON esta bien escrito ya lo comprobe, no hay necesidad de ponerlo

¿Puedo insertar nueva informacion a un archivo JSON? Yo creo que no porque es un archivo local, pero soy novato aun y quiza si se puede pero no se como. Si se puede, ¿Como?

Saludos.

1 respuesta 1

1

Puedes hacer algo así, ahí se muestran todos los datos (sin estilos) desde el JSON, tenés 3 funciones una que carga los datos del JSON inicialmente, una que muestra y refresca los datos, y otra que agrega una persona nueva a un array auxiliar que se popula al hacer la llamada con el fetch, de esa forma al menos podés agregar gente y ver los cambios en el array (siempre en memoria, se borrarán al refrescar), lo ideal sería que tengas un sevidor back al que le puedas hacer una llamada con metodo POST y que eso modifique un valor en una base de datos que luego por llamada por metodo GET podrás recibir. Pero te servirá para hacer pruebas, en cuanto a estilos, podrías crear una tabla y que cada iteración cree un TR con sus TD y es haría una fila por cada persona. Por último cabié el innerHTML por append, ya que el inner lo que hace es reemplazar el contenido, entonces solo te mostraría el último elemento del JSON porque sobreescribiría los anteriores.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <!-- Agrego onload al body para que se haga la primer llamada automáticamente -->
  <body onload="loadUsers()">
    <form action="">
      <div>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" />
      </div>
      <div>
        <label for="age">Age:</label>
        <input type="number" name="age" id="age" />
      </div>
      <div>
        <label for="description">Description:</label>
        <input type="text" name="description" id="description" />
      </div>
      <button type="button" onclick="addUser()">Actualizar</button>
      <!-- Declaro los contenedores de datos  a mostrar -->
      <div id="showname"></div>
      <div id="showage"></div>
      <div id="showdescription"></div>
    </form>
  </body>
</html>

<script>
   // Array para depositar datos tras primer llamada al JSON.
  let users = [];

  function mostrarUsuarios() {
    // Variables de contenedores
    var name = document.getElementById("showname");
    var age = document.getElementById("showage");
    var description = document.getElementById("showdescription");
    // Borro los datos para cargar nuevos
    name.innerHTML = "";
    age.innerHTML = "";
    description.innerHTML = "";
//Agrego el name, age, description por cada persona en JSON
    users.forEach((element) => {
      name.append(`Nombre: ${element.name}`);
      age.append(`Description: ${element.description} `);
      description.append(`Age: ${element.age} `);
    });
  }

  function addUser() {
    // Tomo los valores de cada input
    var name = document.getElementById("name").value;
    var age = document.getElementById("age").value;
    var description = document.getElementById("description").value;

    // Agrego al array objeto con datos de input, nuevo registro.
    users.push({ name, age, description });
    mostrarUsuarios(); // Vuelvo a mostrar los datos
  }

  // Cargo los usuarios desde JSON solo la primera vez que carga página.
  function loadUsers() {
    fetch("data.json")
      .then((respuesta) => respuesta.json())
      .then((respuesta) => {
        users = respuesta; // Vuelco respuesta en array users
        mostrarUsuarios();
      })
      .catch((error) => alert("Ha ocurrido un error (" + error.message + ")"));
  }
</script>

Espero sirva para entender un poco mejor, desde Back-end podrías incluso modificar el JSON de varias formas, incluso desde FileSystem o en base de datos como MongoDB que utiliza JSON, pero desde Front hasta donde se no es posible, estimo por seguridad, ya que todo lo que es front se puede modificar fácilmente desde el "cliente"..

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.