JavaScript - Array con clave y valor variables

 
Vista:
sin imagen de perfil

Array con clave y valor variables

Publicado por Pablo (11 intervenciones) el 06/03/2017 10:40:32
Buenos días,

tengo el siguiente código php donde recojo los datos de una BBDD en dos arrays y los paso a un array javascript a través del for

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var primer = [];
var segun = [];
 
<?php
while ($row = sqlsrv_fetch_array($consulta, SQLSRV_FETCH_ASSOC)){
	$primero[$e] = $row["ID_SECCION"];
	$segundo[$e] = $row["TOTAL"];
	$e++;
}
 
for($i=0; $i < count($primero); $i++ ){
 
	echo 'primer['.$i.'] = "'.$primero[$i].'";';
	echo 'segun['.$i.'] = "'.$segundo[$i].'";';
}
 
?>

Posteriormente utilizo estos arrays dentro de otro array


1
2
3
4
5
6
7
8
9
10
11
"data": [
	{
	"label": primer[0],
	"value": segun[0],
	},
	{
	"label": primer[1],
	"value": segun[1],
	},
 
]

pero necesito poder introducir estos valores dentro de un bucle ya que los arrays "primer" y "segun" son de longitud variable. He intentado de todo meter un bucle dentro del data, combinar los dos arrays para posteriormente llamarlo dentro del data siendo "primer" la clave y "según" el valor.

No se si me he explicado bien, Gracias de antemano.

Aquí os pongo el código entero

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
<script type="text/javascript">
	var primer = [];
	var segun = [];
	var prueba = [];
	<?php
		header('Content-Type: text/html; charset=ISO-8859-1');
		error_reporting(0);
 
			$usuario= "";
			$pass= "";
			$servidor= "";
			$basededatos= "";
			$info = array("Database"=>$basededatos, "UID"=>$usuario, "PWD"=>$pass);
			$conexion = sqlsrv_connect( $servidor , $info );
 
 
			$consulta = sqlsrv_query($conexion, "SELECT ID_SECCION, sum(TIEMPO_INCIDEN) AS TOTAL FROM INCIDENCIAS GROUP BY ID_SECCION");
 
 
			$e = 0;
			while ($row = sqlsrv_fetch_array($consulta, SQLSRV_FETCH_ASSOC)){
				$primero[$e] = $row["ID_SECCION"];
				$segundo[$e] = $row["TOTAL"];
				$e++;
			}
 
           for($i=0; $i < count($primero); $i++ ){
 
                echo 'primer['.$i.'] = "'.$primero[$i].'";';
				echo 'segun['.$i.'] = "'.$segundo[$i].'";';
            }
 
    ?>
 
  FusionCharts.ready(function(){
    var revenueChart = new FusionCharts({
		//pie2d pie3d column2d column3d doughnut2d doughnut3d line2D area2D bar2D pareto2d pareto3d
        "type": "column3d",
        "renderAt": "chartContainer",
        "width": "1000",
        "height": "500",
        "dataFormat": "json",
        "dataSource":  {
          "chart": {
            "caption": "Tiempo de Incidencia por seccion",
            "subCaption": "",
            "xAxisName": "Seccion",
            "yAxisName": "Tiempo Incidencia (HORAS)",
            "theme": "fint"
         },
 
         "data": [
		{
			"label": primer[0],
			"value": segun[0],
		},
		{
			"label": primer[1],
			"value": segun[1],
		},
		{
			"label": primer[2],
			"value": segun[2],
		},
	 ]
      }
 
  });
revenueChart.render();
})
 
</script>
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

Array con clave y valor variables

Publicado por xve (2100 intervenciones) el 06/03/2017 15:04:31
Hola Pablo, la verdad es que no se muy bien como quieres que quede el array al final...
Nos puedes mostrar como te gustaría que quedara? para mostrarte como hacerlo...
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
sin imagen de perfil

Array con clave y valor variables

Publicado por Pablo (11 intervenciones) el 06/03/2017 15:19:32
Buenas XVE

lo que en principio quería conseguir era meter un bucle for dentro del "data"


1
2
3
4
5
6
7
8
9
10
11
12
13
14
"data": [
		{
			"label": primer[0],
			"value": segun[0],
		},
		{
			"label": primer[1],
			"value": segun[1],
		},
		{
			"label": primer[2],
			"value": segun[2],
		},
	 ]

quedando algo asi


1
2
3
4
5
6
7
8
"data": [
       	for (var f=0;f<primer.length; f++){
				{
				"label": primer[f],
				"value": segun[f],
				},
			}
]

pero no he conseguido que funcione, así que mi otra opción era declarar un array fuera del "data" que quedase de la siguiente forma

array = (primero[0]=>segundo[0], primero[1] => segundo[1], primero[2] => segundo[2] .....)

Pero si se puede de alguna forma meter ese bucle dentro del data seria mucho mas conveniente que mi segunda opción.

Un saludo y gracias.
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
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

Array con clave y valor variables

Publicado por xve (2100 intervenciones) el 06/03/2017 15:43:22
Hola Pablo, no se muy bien si esto te serviria...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
 
var data=[
	{
		"label":"a1",
		"value":"b1"
	},
	{
		"label":"a2",
		"value":"b2"
	},
];
 
data.forEach(function(element){
	console.log(element["label"]);
	console.log(element["value"]);
});
</script>

recorre el array y muestra los valores en la consola del navegador...

coméntanos, ok?
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
sin imagen de perfil

Array con clave y valor variables

Publicado por Pablo (11 intervenciones) el 06/03/2017 16:35:13
Buenas tardes,

El problema no esta al mostrarlo, de echo visualizo el array "primero" y "segundo" perfectamente, el problema esta en poder meter dentro del "data []" un bucle para recorrer los otros dos array o cualquier otra manera de meter los valores que necesito dentro del "data []" .

Gracias,
Saludos.
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
Imágen de perfil de kip
Val: 553
Bronce
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Array con clave y valor variables

Publicado por kip (107 intervenciones) el 06/03/2017 15:47:40
Hola, intentalo de esta forma a ver si resulta....

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
<script type="text/javascript">
    var data_chart = '';
    <?php
		header('Content-Type: text/html; charset=ISO-8859-1');
		error_reporting(0);
 
			$usuario= "";
			$pass= "";
			$servidor= "";
			$basededatos= "";
			$info = array("Database"=>$basededatos, "UID"=>$usuario, "PWD"=>$pass);
			$conexion = sqlsrv_connect( $servidor , $info );
 
			$consulta = sqlsrv_query($conexion, "SELECT ID_SECCION, sum(TIEMPO_INCIDEN) AS TOTAL FROM INCIDENCIAS GROUP BY ID_SECCION");
 
			$data_chart_arr = array();
 
			while ($row = sqlsrv_fetch_array($consulta, SQLSRV_FETCH_ASSOC)){
				$data_chart_arr[] = "{ 'label': {$row['ID_SECCION']}, 'value': {$row['TOTAL']} }";
			}
 
			$data_chart = implode(',', $data_chart_arr);
    ?>
 
    data_chart = <?php echo $data_chart; ?>;
 
    FusionCharts.ready(function() {
        var revenueChart = new FusionCharts({
            //pie2d pie3d column2d column3d doughnut2d doughnut3d line2D area2D bar2D pareto2d pareto3d
            "type": "column3d",
            "renderAt": "chartContainer",
            "width": "1000",
            "height": "500",
            "dataFormat": "json",
            "dataSource": {
                "chart": {
                    "caption": "Tiempo de Incidencia por seccion",
                    "subCaption": "",
                    "xAxisName": "Seccion",
                    "yAxisName": "Tiempo Incidencia (HORAS)",
                    "theme": "fint"
                },
 
                "data": [
                    data_chart
                ]
            }
 
        });
        revenueChart.render();
    })
</script>

Pruebalo y nos cuentas si salta algun error.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Array con clave y valor variables

Publicado por Pablo (11 intervenciones) el 06/03/2017 16:24:06
Hola kip,

No me ha funcionado, pero me has dado una idea para trabajar con ella gracias , si lo consigo os comento. No me ha saltado ningún error por lo que no es problema de sintaxis, pero el gráfico no recibe la información y no muestra nada, en cambio de la siguiente forma si lo muestra:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
"data": [
		{
			"label": primer[0],
			"value": segun[0],
		},
		{
			"label": primer[1],
			"value": segun[1],
		},
		{
			"label": primer[2],
			"value": segun[2],
		},
	 ]

con el inconveniente de que solo muestra los tres primeros elementos del array, y necesito que muestre todos los valores devueltos por la consulta.

No entiendo como algo que se resolvería con un simple for me esta dando tantos problemas.

Si alguien tiene alguna idea de como resolverlo estaría muy agradecido

Muchas gracias.
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
Imágen de perfil de kip
Val: 553
Bronce
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Array con clave y valor variables

Publicado por kip (107 intervenciones) el 06/03/2017 16:29:46
Puedes del codigo que te coloque hacer un:

1
console.log(data_chart);

Esto con la variable declara en el codigo javascript...

Y decirme que te muestra ?

Intentalo tambien haciendo el echo directo asi:

1
2
3
"data": [
                    <?php echo $data_chart; ?>
                ]

Ah pero recien me fijo que olvide colocar las comillas dentro de los valores de label y value, modificalo asi:

1
$data_chart_arr[] = "{ 'label': '{$row['ID_SECCION']}', 'value': '{$row['TOTAL']}' }";

Prubea y nos cuentas!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Array con clave y valor variables

Publicado por Pablo (11 intervenciones) el 07/03/2017 09:16:33
Buenos días,

Haciendo unos cambios al código que me facilitaste, ya que el "data_chart_arr[]" no recogía bien los valores de la consulta he conseguido meter las variables en un string de la manera correcta. Pero aora el problema viene al llamar a este string dentro del data.

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
<html>
<head>
<title></title>
<script type="text/javascript" src="../estilos/fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="../estilos/fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
 
	<?php
		header('Content-Type: text/html; charset=ISO-8859-1');
		error_reporting(0);
 
			//conexion BBDD
			$usuario= "xxxxxxx";
			$pass= "xxxxxxxx";
			$servidor= "xxxxxxx";
			$basededatos= "xxxxxxxx";
			$info = array("Database"=>$basededatos, "UID"=>$usuario, "PWD"=>$pass);
			$conexion = sqlsrv_connect( $servidor , $info );
 
 
			//consulta 
			$consulta = sqlsrv_query($conexion, "SELECT ID_SECCION, sum(TIEMPO_INCIDEN) AS TOTAL FROM INCIDENCIAS GROUP BY ID_SECCION");
 
			//recogemos los valores de la consulta en un array
			$e = 0;
			while ($row = sqlsrv_fetch_array($consulta, SQLSRV_FETCH_ASSOC)){
				$primero[$e] = $row["ID_SECCION"];
				$segundo[$e] = $row["TOTAL"];
				$e++;
			}
 
			$data_chart_arr = array();
			for($i=0; $i < count($primero); $i++ ){
				$data_chart_arr[$i] = '{"label":'. $primero[$i]. ',"value":' . $segundo[$i] .',}';
			}
 
			$data_chart = implode(',', $data_chart_arr);
 
    ?>
 
  FusionCharts.ready(function(){
    var revenueChart = new FusionCharts({
		//pie2d pie3d column2d column3d doughnut2d doughnut3d line2D area2D bar2D pareto2d pareto3d
        "type": "column3d",
        "renderAt": "chartContainer",
        "width": "950",
        "height": "725",
        "dataFormat": "json",
        "dataSource":  {
          "chart": {
            "caption": "Tiempo de Incidencia por seccion",
            "subCaption": "",
            "xAxisName": "Seccion",
            "yAxisName": "Tiempo Incidencia (HORAS)",
            "theme": "fint"
         },
         "data": [
		 /*AQUI ESTA EL PROBLEMA NO ME PERMITE METER LA CADENA $DATA_CHART PARA QUE QUEDE DE LA SIGUIENTE FORMA 

{
				"label": primer[0],
				"value": segun[0],
				},
				{
				"label": primer[1],
				"value": segun[1],
				},
				{
				"label": primer[2],
				"value": segun[2],
				},
                                {
                                .....
                                },

*/
		 ]
      }
 
  });
revenueChart.render();
})
 
</script>
 
</head>
 
<body>
  <div style="float: left;" id="chartContainer">FusionCharts XT will load here!</div>
 
  <div>
	<h2 align= "center">LEYENDA</h2>
		<table frame="box" rules="all" cellpadding="1" align = "center">
			<tr align = 'center'>
				<th><b> SECCION </b></th>
				<th><b>TIEMPO INCIDENCIA </b></th>
			</tr>
			<?php
			for($i=0; $i < count($primero); $i++ ){
			echo("<tr>");
				echo("<td>".$primero[$i]."</td>");
				echo("<td>".$segundo[$i]."</td>");
			echo("<tr>");
			}
			//mostrar 
			echo $data_chart;
			?>
	</div>
 
</body>
 
</html>

Gracias,
Un saludo.
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
Imágen de perfil de kip
Val: 553
Bronce
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Array con clave y valor variables

Publicado por kip (107 intervenciones) el 07/03/2017 23:00:32
Intenta haciendo esto:

1
2
3
var data_chart = <?php echo $data_chart; ?>;
data_chart = JSON.parse(data_chart);
.....

Luego mas abajo simplemente incluyes el objeto data_chart:

1
"data": [ data_chart ] .....

Por cierto aqui, la coma luego de $segundo[$i] sobra...:

1
$data_chart_arr[$i] = '{"label":'. $primero[$i]. ',"value":' . $segundo[$i] .',}';

Intentalo y nos cuentas
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Array con clave y valor variables

Publicado por Pablo (11 intervenciones) el 08/03/2017 11:21:14
tampoco funciona empiezo a desistir ya.
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
Imágen de perfil de kip
Val: 553
Bronce
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Array con clave y valor variables

Publicado por kip (107 intervenciones) el 08/03/2017 14:07:10
Puedes luego de modificar como te mencione arriba hacer un

1
console.log(data_chart);

Y colocar aqui que te muestra la consola del navegador.

Es raro que no te funcione!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Array con clave y valor variables

Publicado por Pablo (11 intervenciones) el 08/03/2017 14:36:32
Esto es el error que me muestra en la consola del navegador

Uncaught SyntaxError: Unexpected number BBDD7.php:15

que corresponde a la linea:

1
var data_chart = <?php echo $data_chart; ?>;

que el navegador interpreta asi:

1
var data_chart = {"label":332,"value":390},{"label":176,"value":7106},{"label":312,"value":189},{"label":205,"value":1549},{"label":184,"value":5413},{"label":240,"value":343},{"label":278,"value":22},{"label":307,"value":1977},{"label":287,"value":201},{"label":276,"value":6433},{"label":177,"value":289},.....

Datos que son exactamente los que devuelve de la consulta a la BBDD

Creo que he dado con el error uno de los resultados de la consulta es {"label":,"value":5617} donde el numero de sección es NULL cambio la consulta y te digo el resultado.
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
Imágen de perfil de kip
Val: 553
Bronce
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Array con clave y valor variables

Publicado por kip (107 intervenciones) el 08/03/2017 14:44:33
Entiendo, a ver intentalo de esta forma:

1
2
var data_chart = <?php echo '['.$data_chart.']'; ?>;
data_chart = JSON.parse(data_chart);

Luego abajo quedaria asi:

1
"data": data_chart  .....

Pruebalo....
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Array con clave y valor variables

Publicado por Pablo (11 intervenciones) el 08/03/2017 15:16:59
Este es el error que devuelve

Uncaught SyntaxError: Unexpected token ,

La consola subraya la linea justo en el valor donde el resultado de la consulta es NULL ( he subrayado en el código tal cual me lo muestra en la consola)

1
var data_chart = [{"label":332,"value":390},{"label":176,"value":7106},{"label":312,"value":189},{"label":205,"value":1549},{"label":184,"value":5413},{"label":240,"value":343},{"label":278,"value":22},{"label":307,"value":1977},{"label":287,"value":201},{"label":276,"value":6433},{"label":177,"value":289},{"label":246,"value":1046},{"label":329,"value":4763},{"label":202,"value":952},{"label":178,"value":394},{"label":273,"value":45},{"label":207,"value":239},{"label":279,"value":6468},{"label":248,"value":771},{"label":308,"value":264},{"label":,"value":5617},{"label":239,"value":75},{"label":323,"value":20859},{"label":284,"value":502},{"label":305,"value":3201},{"label":324,"value":60},{"label":311,"value":3827},{"label":190,"value":2903},{"label":267,"value":3744}];

voy hacer una pruebas cambiando la consulta y te digo finalmente si ese era el error, todo apunta a que era eso.
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
Imágen de perfil de kip
Val: 553
Bronce
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Array con clave y valor variables

Publicado por kip (107 intervenciones) el 08/03/2017 15:22:33
Estas en lo cierto y no me habia fijado en aquel valor del objeto que esta vacio! Intenta filtrar mejor los datos de tu consulta y de sgeuro funciona....

Yo lo haria asi:

1
2
3
if ( ! empty($row["ID_SECCION"]) && ! empty($row["TOTAL"])) {
// aqui guardo ya sea en $data_char o en $primero y $segundo....
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Array con clave y valor variables

Publicado por Pablo (11 intervenciones) el 08/03/2017 15:37:03
PUF, si que era ese el error, muchas gracias por todo KIP, me ha costado pero se ha conseguido.

Un saludo,
Mil gracias
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