JavaScript - Generar JSON anidado con esta estructura

 
Vista:
sin imagen de perfil
Val: 1
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Generar JSON anidado con esta estructura

Publicado por elmoyer (1 intervención) el 25/08/2018 12:46:23
Hola buenas,

estoy intentando aprender un poco mas de JS y su manejo de JSON. Sin embargo estoy intentando generar un JSON con una estructura concreta y por ahora me estoy volviendo loco.

La estructura que quiero es esta:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
   "Nombre película":"spiderman",
   "num_de_secuelas":3,
   "secuelas":[
      {
         "nombre de la secuela":"nombre 1",
         "path":"/user/home/peliculas/Spiderman/nombre1",
         "start":"minuto de la primera escena (omite el opening)",
         "end":"Hora/minuto del final de la ultima escena (omite los créditos finales)"
      },
      {
         "nombre de la secuela":"nombre 2",
         "path":"/user/home/peliculas/Spiderman/nombre2",
         "start":"minuto de la primera escena (omite el opening)",
         "end":"Hora/minuto del final de la ultima escena (omite los créditos finales)"
      },
      {
         "nombre de la secuela":"nombre 1",
         "path":"/user/home/peliculas/Spiderman/nombre1",
         "start":"minuto de la primera escena (omite el opening)",
         "end":"Hora/minuto del final de la ultima escena (omite los créditos finales)"
      }
   ]
}


Todo se pasa en un index.html en el que el usuario va introduciendo inputs. El html que tengo es este:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
 
<html>
 
<head>
    <title>Testing</title>
 
</head>
 
<body>
    pelicula : <input type="text" id="pelicula_nombre" >Secuelas : <input type="number" id="secuela" > Folder : <input type="text" id="path" >
    <button type="button" onclick="createJson()">Create JSON</button>
    <script>
        var Pelicula_json = [];
 
        function createJson() {
            var pelicula_nombre = document.getElementById("pelicula_nombre").value;
            var secuela = document.getElementById("secuela").value;
            var path = document.getElementById("path").value;
 
            var parts = [];
            for (var i = 0; i < secuela; i++) {
                var part = {
                    "part_name": "Secuela 1",
                    "carpeta": "ruta"
                };
                parts.push(part);
            }
 
            var pelicula = {
                "pelicula_nombre": pelicula_nombre,
                "secuela": secuela,
                "path": path,
                "parts": parts
            }
            Pelicula_json.push(pelicula);
            console.log("Pelicula json = ", Pelicula_json);
        }
    </script>
</body>
 
</html>

El output que obtengo es el siguiente:

https://imgur.com/a/alX1AXt

Lo que pretendo es que basandonos en el numero introducido en secuelas, se generen los subcampos de carpeta, nombre de la secuela... de forma dinámica.

Para eso he encontrado este código que no sé como implementar:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
 
<head>
    <script type='text/javascript'>
        function addFields() {
            // Number of inputs to create
            var number = document.getElementById("parts").value;
            // Container <div> where dynamic content will be placed
            var container = document.getElementById("container");
            // Clear previous contents of the container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i = 0; i < number; i++) {
                // Append a node with a random text
                container.appendChild(document.createTextNode("Part " + (i + 1)));
                // Create an <input> element, set its type and name attributes
                var input = document.createElement("input");
                input.type = "text";
                input.name = "wave-name" + i;
                container.appendChild(input);
                // Append a line break 
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
</head>
 
<body>
    <input type="text" id="wave-name" name= "wave-name" value="">Wave Name<br>
    <input type="number" id="parts" name="parts" value="">Number of Parts<br >
    <button id="filldetails" onclick="addFields()" style="background-color:green">Fill Details</button>
    <div id="container" >
</body>
 
</html>


¿Alguna ayuda?

Gracias de antemano!! :D
Un saludo!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder