Comparte en Facebook Twitter Google+

Directiva json

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:

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:

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.

En ambos casos el resultado será exactamente el mismo.

Laravel 5.5.3 @JSON directive

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" [email protected]($user)></div>

Para convertir el valor JSON que tenemos en el atributo data-user podrías usar simplemente vanillaJS de la siguiente manera:

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

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Regístrate hoy en Styde y continua mejorando tus habilidades: ver planes.