En este tutorial te mostraré un pequeño truco para hacer que una variable de PHP esté accesible desde JavaScript. Y no solo una variable, también un objeto, arreglo, etcétera.

Si bien esto no es recomendable, pues en su lugar debería usarse AJAX, podemos usar este pequeño truco en apuros para hacer que una variable de PHP esté disponible en JavaScript.

Explicación del funcionamiento

Debido a que PHP es un lenguaje que preprocesa el contenido HTML que se muestra, podemos hacer que se muestre un script de JavaScript (dentro de la misma página) y con PHP renderizar partes del contenido.

Quedará más claro con el ejemplo, pero basta con que sepas que para que esto funcione, el script debe estar “inline” en la página web, y no separado. Sin embargo también hay un modo de pasar variables a otros scripts, y lo veremos en los ejemplos.

Pasar variable de PHP a JS

Veamos el ejemplo más simple y queda así:

See the gist on github.

La magia sucede en la línea 14. Fíjate que es importante, en caso de que sea una cadena, de encerrarlo entre comillas (obviamente) pues PHP solo imprimirá el valor. El HTML final que va a generar la página sería:

See the gist on github.

Puedes probarlo en este enlace.

Variable accesible globalmente

Si quieres que tu variable viva de manera global y sea accesible desde otros scripts, también es posible. Podrías definirla en el encabezado y agregarla a window de JavaScript:

See the gist on github.

Después, para acceder a ella en un script externo se haría lo siguiente:

See the gist on github.

Y eso haría que la variable pasada de PHP a JavaScript sea accesible desde cualquier script. Solo recuerda definirla antes de incluir los otros scripts. Puedes probar el ejemplo aquí.

Pasar un arreglo u objeto de PHP a JavaScript

Anteriormente solo pasamos una simple cadena; pero podemos pasar también datos compuestos usando JSON. Gracias a que JSON representa, de cierto modo, datos nativos en JavaScript, podemos simplemente pasarlos codificados usando json_encode.

Veamos el siguiente ejemplo:

See the gist on github.

Tenemos una variable digamos, compuesta. La estamos pasando a JavaScript con JSON. En este caso no necesitamos comillas pues JSON ya codifica directamente a datos que JavaScript entiende.

Al procesar el documento se va a generar lo siguiente:

See the gist on github.

Como ves, los datos son válidos. Después de eso ya podemos acceder a los mismos. En este caso pasé un objeto, pero podría ser un arreglo.

También se puede almacenar de manera global y bueno, todo lo que te puedas imaginar; depende de tus necesidades.

Puedes probar el ejemplo aquí (no olvides abrir la consola).