El envío de variables PHP a JavaScript es un procedimiento muy común, especialmente en Laravel cuando trabajamos con librerías y/o frameworks de JS como jQuery o Vue y queremos que un objeto o array de PHP, sea accesible por dicha librería.
Hay varias manera de lograr esto utilizando PHP. Veamos el siguiente ejemplo:
Route::get('/', function () {
return view('welcome', [
'user' => [
'name' => 'Joe',
'email' => '[email protected]',
'website' => 'https://styde.net'
]
]);
});
Esta ruta devuelve una variable $user a la vista welcome.blade.php , dicha variable esta compuesta por un array que contiene nombre, email y una dirección url.
Si quisieramos acceder a esta variable desde JavaScript podriamos hacer algo como esto en la vista:
<script type="text/javascript">
const user = {!! json_encode($user) !!};
console.log(user);
</script>
En este caso debemos codificar el array en formato JSON con json_encode($user) y a continuación imprimimos el string sin escapar las comillas o el contenido con {!! !!}.
No hay nada malo con esto, pero ahora desde Laravel 5.5 tenemos una nueva forma de hacerlo.
Se trata de la nueva directiva @json() de Blade. Esta directiva nos permite convertir un array en formato JSON utilizando la sintaxis de Blade, manteniendo así un poco más limpio el código en las vistas del proyecto.
<script type="text/javascript">
const user = @json($user);
console.log(user);
</script>
En ambos casos el resultado será exactamente el mismo.
Usando data attributes
Si quieres enviar variables de este tipo a través de un data attribute de cualquier elemento HTML y acceder a él posteriormente usando JavsaScript puedes hacer algo similar a esto:
<div id="user_data" data-user=@json($user)></div>
Para convertir el valor JSON que tenemos en el atributo data-user podrías usar simplemente vanillaJS de la siguiente manera:
<script type="text/javascript">
let user = document.querySelector('#user_data').dataset.user;
user = JSON.parse(user);
console.log(user);
</script>
En este caso vas a necesitar usar nuevamente JSON.parse() para convertir el string recibido a través del data-attribute a formato json.
El resultado final será exactamente el mismo al que obtuvimos en el ejemplo anterior.
Puedes ver los detalles del Pull Request al repositorio del framework que agrega esta directiva: #21004.
Material relacionado
- Curso de Novedades de Laravel 5.5
- Directivas de Blade @verbatim y @php en Laravel 5.2
- Curso de Vue 2
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
