Pasar Valores PHP a Javascript

Pasar Valores PHP a Javascript

Si te as topado con con la necesidad de pasar el valor de un Array multidimensional PHP y utilizarla en Javascript – Bueno – no estas solo, esta situación se presenta en muchas situaciones y la manera rápida y fácil de hacerlo es con la función json_encode(); del lado de PHP.

Del lado de Javascript usamos la función JSON.parse(); así lo podemos utilizar como un Objeto de Javascript.

Del lado de PHP podemos tener algo así.

$phpArray = ['url' => 'https://www.vcomputadoras.com', 'importante' => true ];

Tenemos un Array de PHP multidimensional el cual tiene dos propiedades y sus valores , ahora queremos no solo tener en PHP pero también en Javascript, usamos json_endode() y json.Parse() de esta forma.

<script>
        // aqui, creamos una constante javascript
        // la cual podemos utilizar en cualquier parte
        // de javascript
        const php_data = JSON.parse('<?php echo json_encode($phpArray); ?>');
        // ahora usamos la consola para ver su contenido
        console.log( php_data.importante );
    </script>

Ojo, codificamos nuestro array multidimensional de PHP a Json y después solo lo convertimos a un objeto Javascript utilizando json.Parse();, con esto ya podemos usarlo como un objeto normal de Javascript, así: php_data.importante y este contendrá el valor TRUE. se ve así..

<?php
    //  tenemos nuestro array
    //  que queremos pasara
    //  a Javascript
    $phpArray = ['url' => 'https://www.vcomputadoras.com', 'importante' => true ];
?>
<!DOCTYPE html>
<html lang="en_US" xml:lang="en_US" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script>
        // aqui, creamos una constante javascript
        // la cual podemos utilizar en cualquier parte
        // de javascript
        const php_data = JSON.parse('<?php echo json_encode($phpArray); ?>');
        // ahora usamos la consola para ver su contenido
        console.log( php_data.url );
    </script>
</head>
<body>
</body>
</html>

En el ejemplo anterior nuestro PHP y Javascript esta en el mismo documento para Pasar Valores PHP a Javascript, que tal si lo que queremos es que este disponible en un documento JS separado, que esta antes de crear nuestro objeto Javascript ?

<?php
    //  tenemos nuestro array
    //  que queremos pasara
    //  a Javascript
    $phpArray = ['url' => 'https://www.vcomputadoras.com', 'importante' => true ];
?>
<!DOCTYPE html>
<html lang="en_US" xml:lang="en_US" xmlns="http://www.w3.org/1999/xhtml">
<body>
    <!-- en un documento JS -->
    <script src="my-javascript.js"></script>
    <script>
        // aqui, creamos una constante javascript
        // la cual podemos utilizar en cualquier parte
        // de javascript
        const php_data = JSON.parse('<?php echo json_encode($phpArray); ?>');
    </script>
</body>
</html>

Este te dará un error “Uncaught ReferenceError: php_data is not defined ” esto es porque nuestro Browser cargo my-javascript.js antes que creáramos nuestro objecto Javascript php_data – para – que este disponible utilizamos el atributo “defer<script src="my-javascript.js" defer></script> listo!

Sin embargo también tienes la opción de utilizar el evento onload que esta disponible en la variable global window del árbol DOM de Javascript en el documento JS Pasar Valores PHP a Javascript, así

window.onload = ()=> {
    console.log( php_data.url );
}

Ya tenes disponible los datos que vienen de PHP, Pasar Valores PHP a Javascript es sencillo y muy eficiente me parece que hay mas métodos sin embargo esto son los mas comunes que no necesitas de librerías para hacerlo fácil. Nada mejor que no usar librerias para que no tome mucho tiempo el browser en cargar la pagina, en esto días de Mobile todo tiene que ser rápido y responder en menos de 2 segundos.