Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » columna que no se muestra DOM JSON

JavaScript - columna que no se muestra DOM JSON

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

columna que no se muestra DOM JSON

Publicado por Fulgencio (7 intervenciones) el 28/03/2020 11:23:48
Hola, la segunda columna no se muestra y no sé porqué

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<body>
 
<p id="miEspacio"></p>
 
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
//var texto_clima=document.createTextNode(myObj[k].general);
//Creo array de dias de la semana
var dias_semana=["Lunes","Martes","Miercoles","Jueves","Viernes","Sabado","Domingo"];
// Obtener la referencia del elemento body
  var body = document.getElementsByTagName("body")[0];
 
  // Crea un elemento <table> y un elemento <tbody>
  var tabla   = document.createElement("table");
  var tblBody = document.createElement("tbody");
 
  // Crea las celdas
  for (var i = 0; i < 8; i++) {
    // Crea las hileras de la tabla
    var hilera = document.createElement("tr");
 
    for (var j = 0; j < 26; j++) {
      // Crea un elemento <td> y un nodo de texto, haz que el nodo de
      // texto sea el contenido de <td>, ubica el elemento <td> al final
      // de la hilera de la tabla
      var celda = document.createElement("td");
      celda.setAttribute("height","48px");
      celda.setAttribute("width","125px");
      //var textoCelda = document.createTextNode("celda en la hilera "+i+", columna "+j);
      var textoCelda_dia=document.createTextNode("dia");
      var textoCelda_dias=document.createTextNode(dias_semana[i-1]);
      var textoCelda_Temp=document.createTextNode("Temp");
      var textoCelda_Horas=document.createTextNode((j-2)+"h");
      //var textoCelda_Clima=document.createTextNode(myObj[1].general);
      //PRIMERA COLUMNA ---- "dia" y dias de la semana
      if(j==0){
      	if(j==0 && i==0){
      		celda.appendChild(textoCelda_dia);
      	}else{
      	celda.appendChild(textoCelda_dias);
      	}
      }
      //FIN PRIMERA COLUMNA
      //SEGUNDA COLUMNA ---- "Temp"
      //if(j==1){
      	//if(j==1 && i==0){
      		//celda.appendChild(textoCelda_Temp);
      	//}
      //}
 
      //FIN SEGUNDA COLUMNA
      //PRIMERA FILA ---- "1h" hasta "23h"
      if(i==0 && j>1){
      		celda.appendChild(textoCelda_Horas);
      }
 
      //fIN PRIMERA FILA
      //COLUMNA ICONOS.- LAS IMAGENES SE PONEN CON setAttribute BACKGROUND O SIMILAR
      //var textoCelda_Clima=document.createTextNode(myObj[4].dia);
     if(j==1){
      	if(j==1 && i==0){
      		celda.appendChild(textoCelda_Temp);
      	}
      	}
      	/*for(var k=0;k<7;k++){
      		var textoCelda_Clima=document.createTextNode(myObj[i].dia);
      		celda.appendChild(textoCelda_Clima);
      	}*/
 
 
 
 
 
      //FIN COLUMNA ICONOS
      hilera.appendChild(celda);
    }
 
    // agrega la hilera al final de la tabla (al final del elemento tblbody)
    tblBody.appendChild(hilera);
  }
 
  // posiciona el <tbody> debajo del elemento <table>
  tabla.appendChild(tblBody);
  // appends <table> into <body>
  body.appendChild(tabla);
  // modifica el atributo "border" de la tabla y lo fija a "2";
  tabla.setAttribute("border", "2");
 
for (var miDia in myObj){
  	// Controlando que json realmente tenga esa propiedad
  		//if (myObj.hasOwnProperty(miDia)) {
    	// Mostrando en pantalla
    	//document.write(dias_semana[miDia]+"<br>");
    	//alert("El dia es " + miDia);
  		}
	}
  }
 
xmlhttp.open("GET", "https://my-json-server.typicode.com/raulserrano/api/tiempo_semana", true);
xmlhttp.send();
 
 
//https://my-json-server.typicode.com/raulserrano/api/tiempo_semana
 
 
/*var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    //document.getElementById("miEspacio").innerHTML = myObj[0].dia;
    // Obteniendo todas las claves del JSON
	for (var miDia in myObj){
  	// Controlando que json realmente tenga esa propiedad
  		if (myObj.hasOwnProperty(miDia)) {
    	// Mostrando en pantalla
    	document.write(dias_semana[miDia]+"<br>");
    	//alert("El dia es " + miDia);
  		}
	}
  }
};
xmlhttp.open("GET", "https://my-json-server.typicode.com/raulserrano/api/tiempo_semana", true);
xmlhttp.send()^*/
 
</script>
 
 
 
</body>
</html>
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
sin imagen de perfil
Val: 91
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

columna que no se muestra DOM JSON

Publicado por Alfredo (36 intervenciones) el 29/03/2020 09:37:10
Saludos Fulgencio,

Espero esto te ayude

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
<body>
<p id="miEspacio"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var semana = JSON.parse(this.responseText);
    var body = document.getElementsByTagName("body")[0];
 
    // Crea un elemento <table> y un elemento <tbody>
    var tabla   = document.createElement("table");
    var tblBody = document.createElement("tbody");
 
    // Creamos un arreglo con la informacion de los encabezados
    var arregloEncabezado = new Array(26); // Tamaño inicial de 26
    arregloEncabezado[0] = "Dia";
    arregloEncabezado[1] = "Temp";
 
    var celda;
    var encabezado;
    var textoCelda;
    var hilera = document.createElement("tr");
    hilera.setAttribute("height","48px");
 
    for (i = 0; i < arregloEncabezado.length; i ++) {
      encabezado = document.createElement("th");
      encabezado.setAttribute("width","125px");
      var texto;
      if (i < 2) {
        texto = arregloEncabezado[i];
      } else {
        texto = (i-2) + "h";
      }
 
      textoCelda = document.createTextNode(texto);
      encabezado.appendChild(textoCelda);
      hilera.appendChild(encabezado);
    }
    tblBody.appendChild(hilera);
 
    semana.forEach(dia => {
      // Dia
      textoCelda = document.createTextNode(dia.dia);
      celda = document.createElement("td");
      celda.appendChild(textoCelda);
      hilera = document.createElement("tr");
      hilera.setAttribute("height","48px");
      hilera.appendChild(celda);
 
      // General
      textoCelda = document.createTextNode(dia.general);
      celda = document.createElement("td");
      celda.appendChild(textoCelda);
      hilera.appendChild(celda);
 
      // Temperaturas
      dia.temperaturas.forEach(temp => {
        textoCelda = document.createTextNode(temp);
        celda = document.createElement("td");
        celda.appendChild(textoCelda);
        hilera.appendChild(celda);
      });
      tblBody.appendChild(hilera);
    });
 
    // posiciona el <tbody> debajo del elemento <table>
    tabla.appendChild(tblBody);
    // appends <table> into <body>
    body.appendChild(tabla);
    // modifica el atributo "border" de la tabla y lo fija a "2";
    tabla.setAttribute("border", "2");
 
	}
  }
 
xmlhttp.open("GET", "https://my-json-server.typicode.com/raulserrano/api/tiempo_semana", true);
xmlhttp.send();
</script>
</body>
</html>
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