Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Recorrer un json con js y mostrar en html

JavaScript - Recorrer un json con js y mostrar en html

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 6
Ha disminuido su posición en 37 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Recorrer un json con js y mostrar en html

Publicado por Yeison (1 intervención) el 02/05/2018 22:54:42
Buenas tardes

Estoy aprendiendo a trabajar con js y su infinidad de soluciones, vamos al grano.

tengo un JSON el cual contiene varios arreglos, y deseo saber como puedo usando algún ciclo en JS recorrer el JSON y mostrarlo en un html (no quiero verlo en un alerte, quiero imprimirlo en pantalla).

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
{
    "Centros_educativos":
    [{
      "nom_colegio":"colegio numero 1",
      "Cursos":
      [{
        "Nom_curso":"Primero",
        "list_estudiantes":[{
          "Nom_est":"Pedro",
          "Genero":"Masculino",
          "Edad":"5"
        },{
          "Nom_est":"Juan",
          "Genero":"Masculino",
          "Edad":"6"
        }]
      },{
        "Nom_curso":"segundo",
        "list_estudiantes":[{
          "Nom_est":"Pedro",
          "Genero":"Masculino",
          "Edad":"5"
        },{
          "Nom_est":"Juan",
          "Genero":"Masculino",
          "Edad":"6"
        }]
      }]
    },{
      "nom_colegio":"colegio numero 1",
      "Cursos":
      [{
        "Nom_curso":"Tercero",
        "list_estudiantes":[{
          "Nom_est":"Pedro",
          "Genero":"Masculino",
          "Edad":"5"
        },{
          "Nom_est":"Juan",
          "Genero":"Masculino",
          "Edad":"6"
        }]
      },{
        "Nom_curso":"Cuarto",
        "list_estudiantes":[{
          "Nom_est":"Pedro",
          "Genero":"Masculino",
          "Edad":"5"
        },{
          "Nom_est":"Juan",
          "Genero":"Masculino",
          "Edad":"6"
        }]
      }]
    }
    ]
}


Gracias por la atención, espero alguien pueda ayudarme .
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
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Recorrer un json con js y mostrar en html

Publicado por xve (2100 intervenciones) el 03/05/2018 07:31:46
Hola Yeison, dependera de la información que quieras obtener... aqui te muestro un simple ejemplo que te devuelve el nombre de los colegios, y el nombre de los cursos de cada uno de ellos.

Devuelve:
colegio numero 1
Curso: Primero
Curso: segundo
colegio numero 1
Curso: Tercero
Curso: Cuarto

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<script>
var x={
    "Centros_educativos":
    [{
      "nom_colegio":"colegio numero 1",
      "Cursos":
      [{
        "Nom_curso":"Primero",
        "list_estudiantes":[{
          "Nom_est":"Pedro",
          "Genero":"Masculino",
          "Edad":"5"
        },{
          "Nom_est":"Juan",
          "Genero":"Masculino",
          "Edad":"6"
        }]
      },{
        "Nom_curso":"segundo",
        "list_estudiantes":[{
          "Nom_est":"Pedro",
          "Genero":"Masculino",
          "Edad":"5"
        },{
          "Nom_est":"Juan",
          "Genero":"Masculino",
          "Edad":"6"
        }]
      }]
    },{
      "nom_colegio":"colegio numero 1",
      "Cursos":
      [{
        "Nom_curso":"Tercero",
        "list_estudiantes":[{
          "Nom_est":"Pedro",
          "Genero":"Masculino",
          "Edad":"5"
        },{
          "Nom_est":"Juan",
          "Genero":"Masculino",
          "Edad":"6"
        }]
      },{
        "Nom_curso":"Cuarto",
        "list_estudiantes":[{
          "Nom_est":"Pedro",
          "Genero":"Masculino",
          "Edad":"5"
        },{
          "Nom_est":"Juan",
          "Genero":"Masculino",
          "Edad":"6"
        }]
      }]
    }
    ]
}
 
for(var i=0;i<x.Centros_educativos.length;i++) {
    document.write("<br>"+x.Centros_educativos[i].nom_colegio);
    for(var j=0;j<x.Centros_educativos[i].Cursos.length;j++) {
        document.write("<br>Curso: "+x.Centros_educativos[i].Cursos[j].Nom_curso);
    }
}
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar