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

将信息保存在 JSON 中

  • 772

假设我有这个 JSON

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

我想通过一个表单向这个 JSON 添加更多电影，并且该信息保存在 JSON 文件中。有可能这样做吗？

javascript

2 Answers

  1. Best Answer

    是的，这是可能的，我们将以 JSON 为例，为此我们需要创建一个 html 表单来传递数据。

    为此，我们将创建我们的索引

    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>

    我们将有 3 个字段（Title、Director 和 Release Date），如果我们想添加更多，我们可以稍后再做。使用您的 id 创建表单后，我们会创建 2 个 js 文件（至少我是这样处理的）。

    第一个是 JSON 数据，另一个是所有的 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;
}

    在这里，我们声明一个数组，我们将在其中存储将添加到表单中的数据，使用agregarDatosPelicula(). 在这个函数中，你告诉它的是创建一个对象NuevaPelicula，你将在其中以 json 格式存储数据。然后所有这一切，你用方法将它添加到你的数据电影数组中peliculasDatos.push(NuevaPelicua);

    明白了这一点，让我们来看看这一切的逻辑

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

    在这里，我们有兴趣获取提交时输入的数据，这就是为什么我们获取按钮的 id 以及将存储在一个名为的函数中的所有内容，guardarDatosPeliculas()这只不过是对所有输入的调用（及其各自的id)，这些将存储在函数中agregarDatosPeliculas()（因为我们可以访问 newMovie 对象及其数据）。

    最后，我们必须将所有这些都打印在一个表格中（对于这个例子，考虑到它）。并用它显示您从输入中获得的数据。

    创建一个获取电影列表并返回它们的列表变量。我们还声明了它们将在哪里显示，在本例中为 tbody 及其各自的 id。它<body></body>使用innerHTML 清理其中的所有数据。

    我们将创建一个 for 循环，只要列表的大小小于 i，我们的 row 变量就会将您在 json 文件中的数据插入到 tbody 中。

    在这种情况下，我们有 3：我们将告诉您应该在哪些位置添加它们titulo, director y Lanzamiento 的方法。insertCell()最后，使用 innerHTML 我们清理并插入lista[i].propiedad...

    请记住，我们在 varNuevaPelicula中放置了属性，而这个特定示例有 3。title, director y date

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

    我希望我已经很好地解释了自己，如果您有任何问题，我会很乐意回答您。

    编辑1：

    如果要添加更多数据，则必须通过添加所需字段来修改表单，在 interface.js 中添加另一个agregarDatosPelicula(... varN) 数据NuevaPelicula

    最后，将它们添加到guardarDatosPelicula()各自的 id 并打印出来，以便它可以显示在您的 html 中

    • 3

  2. 但是如何将电影保存到 JSON 文件中以便在打开时检索它？

    • 0