Si se puede, y vamos a tomar de ejemplo el JSON, para ello necesitamos crear un form html donde le pasemos los datos.
para ello crearemos nuestro index
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>JSON || FORM</title>
</head>
<body>
<div class="container">
<form action="" method="POST">
<h1>Pelicula</h1>
<div class="form-group">
<label for="">Titulo de la Pelicula:</label>
<input type="text" class="form-control" name="nombre" id="title">
</div>
<div class="form-group">
<label for="">Director de la Pelicula</label>
<input type="text" class="form-control" name="director" id="director">
</div>
<div class="form-group">
<label for="">Fecha de Lanzamiento</label>
<input type="date" class="form-control" name="lanzamiento" id="lanzamiento">
</div>
<div class="form-group">
<button type="button" class="btn btn-primary btn-sm" name="btnSubmit" id="btnSubmit">Enviar</button>
</div>
</form>
</div>
<div class="container">
<table class="table table-hover" id="tablaPelicula">
<thead>
<tr>
<th>Titulo</th>
<th>Director</th>
<th>Fecha Lanzamiento</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="interfaz.js"></script>
<script src="logica.js"></script>
</body>
</html>
En donde tendremos 3 campos (Titulo, Director y Fecha de Lanzamiento), si queremos agregar mas, podemos hacerlos después. Una vez creado tu form con tus id, creamos 2 archivos js (al menos así lo maneje).
En el primero tendremos los datos del JSON y en el otro, toda la logica del js.
interfaz.js
var peliculaDatos = [];
function agregarDatosPelicula(peliculaTitulo, peliculaDirector, peliculaFechaLanzamiento) {
var NuevaPelicula = {
title: peliculaTitulo,
director: peliculaDirector,
date: peliculaFechaLanzamiento
};
console.log(NuevaPelicula);
peliculaDatos.push(NuevaPelicula);
}
function obtenerListaPelicula() {
return peliculaDatos;
}
Aqui declaramos un arreglo donde estaremos almacenandos los datos que se vayan agregar a de tu form, mediante la función agregarDatosPelicula()
. En esta funcion, lo que le dices es debe crear un objeto NuevaPelicula
donde guadaras tus datos en formato json. Luego todo esto, lo agregas a tu arreglo peliculas datos con el metodo peliculasDatos.push(NuevaPelicua);
Una vez comprendido esto, vamos a la logica de todo esto
logica.js
document.querySelector('#btnSubmit').addEventListener('click', guardarDatosPeliculas);
imprimirTabla();
function guardarDatosPeliculas() {
var guardarPeliculaTitulo = document.querySelector('#title').value,
guardarPeliculaDirector = document.querySelector('#director').value,
guardarPeliculaLanzamiento = document.querySelector('#lanzamiento').value;
agregarDatosPelicula(guardarPeliculaTitulo, guardarPeliculaDirector, guardarPeliculaLanzamiento);
imprimirTabla();
}
function imprimirTabla() {
var lista = obtenerListaPelicula(),
tbody = document.querySelector('#tablaPelicula tbody');
tbody.innerHTML = '';
for (var i = 0; i < lista.length; i++) {
var row = tbody.insertRow(i),
tituloCelda = row.insertCell(0),
directorCelda = row.insertCell(1);
fechaCelda = row.insertCell(2);
tituloCelda.innerHTML = lista[i].title;
directorCelda.innerHTML = lista[i].director;
fechaCelda.innerHTML = lista[i].date;
tbody.appendChild(row);
}
}
Aqui nos interesa obtener los datos que tienen los inputs a la hora de darle submit, es por ello que obtenemos el id del boton y todo eso sera guardado en una funcion llamada guardarDatosPeliculas()
Que no es mas que una llamada a todos los inputs (con su respectivos id), estos los guardaras en la funcion agregarDatosPeliculas()
(ya que tenemos acceso al objeto nuevaPelicula y sus datos).
Por ultimo nos queda imprimir todo esto en un tabla (para este ejemplo lo tome en cuenta). y con ello, mostrar los datos que obtienes de los inputs.
Creando una variable lista la cual obtiene la lista de las peliculas y las retorna.
tambien declaramos en donde se van a mostrar, en este caso tbody y su respectivo id. Se limpia los datos que haya en <body></body>
con innerHTML.
Crearemos un ciclo for que mientras el tamaño de la lista sea menor a i
nuestra variable row estara insertando en tbody datos que tienes en tu archivo json.
en este caso, tenemos 3: titulo, director y Lanzamiento
las cuales con el metodo insertCell()
le iremos diciendo en que posiciones se deben agregar. por ultimo, con innerHTML limpiamos e insertamos con lista[i].propiedad...
recuerda que en var NuevaPelicula
le pusimos la propiedad, y este ejemplo en concreto tiene 3. title, director y date
var NuevaPelicula = {
title: peliculaTitulo,
director: peliculaDirector,
date: peliculaFechaLanzamiento
};
Espero haberme explicado bien, si tienes alguna duda, con gusto te contesto.
EDIT1:
Si deseas agregar mas datos, debes modificar tu form agregando el campo que deseas, en interfaz.js agregar otro dato en agregarDatosPelicula(... varN)
y tambien en NuevaPelicula
por ultimo, agregarlos en guardarDatosPelicula()
con su respectivo id e imprimirlo para que se pueda visualizar en tu html