Crear un array bidimensional Javascript con PHP

  • Por
  • 03 de noviembre de 2011
  • Valoración:
  • 4 Comentarios
  • Javascript, PHP
Vemos cómo crear un array bidimensional en el lenguaje Javascript, pero desde programación en PHP y con datos que obtenemos desde MySQL.
Algunas ocasiones hemos tratado un tema similar, pero más simple que el que vamos a desarrollar en este artículo y es que, el asunto que nos ocupa, no deja de ser una de las preguntas más comunes de los desarrolladores que están empezando a trabajar combinando los dos lenguajes más comunes, del mundo de la creación de webs. Se trata de comunicar entre PHP y Javascript, para pasar información de un lado a otro.

Por ejemplo, podéis encontrar en DesarrolloWeb.com una FAQ sobre el paso de variables desde PHP a Javascript y al contrario. Pero, como verás a continuación, vamos a ir un poco más allá y resolver un caso bastante más complejo de comunicación entre los lenguajes.

En este artículo vamos a ver detalladamente cómo crear un array bidimensional en el lenguaje Javascript desde un script en PHP. Utilizaremos PHP para crear el array y MySQL para rellenarlo con datos obtenidos de una base de datos. Esto lo hacemos así para que el artículo y el ejemplo sean lo más reales posibles de cara a un proyecto web.

Antes de empezar necesitamos tener claro lo que es un array bidimensional, manejar bien Javascript y PHP.

Vamos a empezar creándonos un supuesto para entender mejor el ejemplo. Partimos de que tenemos que mostrar el nombre de una persona y su foto. Os preguntareis para que necesitamos Javascript en este ejemplo, bien pues muy sencillo, queremos mostrar usuarios, con su nombre y foto, uno detrás de otro, pero en la misma zona, es decir, como si pasáramos diapositivas.

Tenemos que decir que en este artículo solo nos centraremos en la parte de crear y cargar el array con los datos necesarios para dicho supuesto. Si estáis interesados en crear un supuesto parecido al citado podéis ver los siguientes artículos:

Si os fijáis en los dos primeros artículos utilizamos array en Javascript, aunque ya los tenemos rellenos a mano, pero podríamos aplicar este artículo, para poder obtener los datos desde PHP, si los datos los tuviéramos en una base de datos MySQL.

Para realizar este ejemplo vamos a crear un archivo PHP llamado index.php y realizamos nuestra consulta a la base de datos. El código sería algo como esto:

<?
$ssql="select * from usuario";
   $rs_p=mysql_query($ssql);

A continuación tendríamos que empezar a crear nuestro Javascript, simplemente abriendo etiquetas de Javascript y primera parte del array.

if(mysql_num_rows($rs)>=1){
      echo '<script language="javascript">';
       echo 'var imagenes = [ ';

Ahora tan sólo nos queda ir rellenando el array con los datos obtenidos en la consulta SQL.

while($fila=mysql_fetch_object($rs)){
         echo ' ["imagen/'.$fila->ruta_imagen.'"';
         
      echo ',"'.$fila->nombre.'"]';
      }

Y para finalizar cerramos el array, el script Javascript y el archivo PHP:

      echo '];';
   }
   echo '</script>';

?>

A continuación os dejo lo que sería el código completo para que podáis entenderlo mejor.

<?
   $ssql="select * from usuario";
   $rs_p=mysql_query($ssql);
   if(mysql_num_rows($rs)>=1){
      echo '<script language="javascript">';
       echo 'var imagenes = [ ';
      while($fila=mysql_fetch_object($rs)){
         echo ' ["imagen/'.$fila->ruta_imagen.'"';
         
      echo ',"'.$fila->nombre.'"]';
      }
      echo '];';
   }
   echo '</script>';

?>

Con esto tendríamos nuestro array Javascript creado y cargado con los datos de la base de datos. A partir de aquí podemos darle el uso que queramos dentro de nuestras webs.

Autor

Sara Alvarez

Equipo DesarrolloWeb.com

Comentarios

PakoDiaz

10/11/2011
¿No seria mejor hacer esto?
creo que tu codigo funciona.. pero.... veo una mala practica queme hace sangrar los ojos :S... PHP ha sido muy atacado por generar aplicaciones con codigo espagueti, :S... esto se refiere a la convinacion de lenguajes que es lo que veo en tu post ya que de hecho al mismo tiempo convinas logica de PHP con HTML(para poner el script) y otra parte con JS(para crear el array), lo que hace que ninguno de los tres lenguaje se entienda que esta haciendo, lo malo de mezclar asi el codigo es que terminas teniendo un codigo dificil de entender.. la mejor practica es crear y realizar la operaciones y logica que se requiera para a partir de alli solo ir a imprimir.. no se velo creo que va mejor este codigo:

$ssql = "select * from usuario";
$rs_p = mysql_query($ssql);
if(mysql_num_rows($rs)>=1){
$datos = array();
while($fila = mysql_fetch_object($rs)){
$datos[] = array("imagen/".$fila->ruta_imagen,
$fila->nombre);
}
}else{
$datos = false;
}
?>
<script type="text/javascript">
var imagenes = <?=json_encode($datos)?>;
</script>;

tavien veia que si tu consulta no regresa columnas simplemente la variable nunca se creaba por que ni incluias el script, lo que posiblemente te pegaria en los JavaScripts que intentaran ver esa variable ya que seria un undefined y muy posiblemente tronarian tus scripts, y ya asi puedes ver si imagenes es false es que no hay imagenes. pero siempre existira la variable imagenes.

otra cosa language="javascript" ha sido deprecado desde hace tiempo se debe de usar type="text/javascript" en su lugar.

Leonardo

17/11/2011
De acuerdo con PakoDiaz
Estoy totalmente de acuerdo con PakoDiaz, y la forma de hacerlo 100% sin mezclar lenguajes es pedir cin AJAX desde JS el PHP que arme el array.

Saludos

andy

17/11/2011
Tiene razon
touche!

idsolarte

14/4/2014
Obeservaciones
Tienen mucha razon, pero aparte de la programacion, creo que es conveniente que revisen la ortografia.
Es molesto y no sobra decir hasta horroroso en este momento donde tenemos tantos recursos digitales se vean tantos horrores y atropellos de ortografia.

Compartir