Home / Questions / 371782
Accepted
Fernando Iam
Asked: 2020-07-08 13:24:14 +0800 CST 2020-07-08 13:24:14 +0800 CST

Save the information in a JSON

  • 772

Let's say I have this JSON

{
"pelicula":[
 { 
  "Titulo":"La vida es bella",
  "Director":"Roberto Benigni"
}
 { 
  "Titulo":"Jurassic park",
  "Director":"Steven Spielberg"
}
    ]
}

And I want to add more movies to this JSON, through a form, and that information is saved in the JSON file. Is it possible to do that?

javascript

2 Answers

  1. Best Answer

    Yes, it is possible, and we are going to take the JSON as an example, for this we need to create an html form where we pass the data.

    for this we will create our 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>

    Where we will have 3 fields (Title, Director and Release Date), if we want to add more, we can do it later. Once your form is created with your ids, we create 2 js files (at least that's how I handle it).

    In the first we will have the JSON data and in the other, all the js logic.

    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;
}

    Here we declare an array where we will be storing the data that will be added to your form, using the agregarDatosPelicula(). In this function, what you tell it is to create an object NuevaPeliculawhere you will store your data in json format. Then all this, you add it to your data movies array with the methodpeliculasDatos.push(NuevaPelicua);

    Once this is understood, let's go to the logic of all this

    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);
    }
}

    Here we are interested in obtaining the data that the inputs have when giving it submit, that is why we obtain the id of the button and all that will be stored in a function called guardarDatosPeliculas()Which is nothing more than a call to all the inputs (with their respective id), these will be saved in the function agregarDatosPeliculas()(since we have access to the newMovie object and its data).

    Finally we have to print all this in a table (for this example take it into account). and with it, display the data you get from the inputs.

    Creating a list variable which gets the list of movies and returns them. We also declare where they will be displayed, in this case tbody and its respective id. It cleans up any data in it <body></body>with innerHTML.

    We will create a for loop that as long as the size of the list is less than i, our row variable will be inserting data that you have in your json file into tbody.

    in this case, we have 3: titulo, director y Lanzamiento which with the method insertCell()we will tell you in which positions they should be added. Finally, with innerHTML we clean and insert withlista[i].propiedad...

    remember that in var NuevaPeliculawe put the property, and this particular example has 3.title, director y date

    var NuevaPelicula = {
        title: peliculaTitulo,
        director: peliculaDirector,
        date: peliculaFechaLanzamiento
    };

    I hope I have explained myself well, if you have any questions, I will gladly answer you.

    EDIT1:

    If you want to add more data, you must modify your form by adding the field you want, in interface.js add another data in agregarDatosPelicula(... varN) and also inNuevaPelicula

    finally, add them guardarDatosPelicula()with their respective id and print it so that it can be displayed in your html

    • 3

  2. But how do you save movies to a JSON file to retrieve it on opening?

    • 0