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"..