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:
Todo se pasa en un index.html en el que el usuario va introduciendo inputs. El html que tengo es este:
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:
¿Alguna ayuda?
Gracias de antemano!! :D
Un saludo!
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
0