entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Generar JSON anidado con esta estructura

Hola buenas,

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

La estructura que quiero es esta:

{
   "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:

<!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:
Output

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:

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!

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Otras Preguntas y Respuestas


Actividad Reciente

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta