Laravel Transform PHP Variable to direct JavaScript • bonstutorial

Sometimes we need to Transform PHP Variable, array, data direct to JavaScript in Laravel. It saves to write multiple codes or lines which is not essential. Here I will show you how to do it with example.

Transform PHP Variable from controller to direct JavaScript in Laravel

Configuration

write in the composer or terminal (hold shift+right click on your project)

composer require laracasts/utilities

1	composer require laracasts/utilities

Go to composer.json(check following line or add if you haven’t)

"require": {
 "laracasts/utilities": "^3.0",
},

"require": {

"laracasts/utilities": "^3.0",

Go to config/app.php

in provider, add following line

Laracasts\Utilities\JavaScript\JavaScriptServiceProvider::class,

1	Laracasts\Utilities\JavaScript\JavaScriptServiceProvider::class,

in aliases, add following line

'JavaScript'=>Laracasts\Utilities\JavaScript\JavaScriptFacade::class,

1	'JavaScript'=>Laracasts\Utilities\JavaScript\JavaScriptFacade::class,

write in composer

php artisan vendor:publish

1

php artisan vendor:publish

This will add a new configuration file to config/javascript.php
by default, in config/javascript.php

<?php return [ 'bind_js_vars_to_this_view' => 'footer', 'js_namespace' => 'window' ];

1
2
3
4
5
6
7
8

<?php

return [

'bind_js_vars_to_this_view' => 'footer',
'js_namespace' => 'window'

];

Here footer is actually the View you want your new JavaScript variables to be prepended to.

window By default, all JavaScript variables will be nested under the global window object

You can change these footer and window to your desired name.
Suppose I name footer to footervarview and window to windowvar

<?php

return [
    'bind_js_vars_to_this_view' => 'footervarview',
    'js_namespace' => 'windowvar'

];

<?php

return [

'bind_js_vars_to_this_view' => 'footervarview',

'js_namespace' => 'windowvar'

];

create a view called footervarview.blade.php under views folder (/resources/views/footervarview.blade.php)

Note: this view name must be same with ‘bind_js_vars_to_this_view’ => ‘footervarview’,

This file will be totally empty...Nothing inside

How to use

in the controller (PatientController .php), add the following

use JavaScript;

1	use JavaScript;

Add inside controller function

JavaScript::put([

]);

JavaScript::put([

]);

Suppose the controller look like (PatientController .php)

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use JavaScript;

class PatientController extends Controller
{
    //
    public function view_patient(){
         $dataname='today is holiday';
    	//following line sent or pass these variables direcly to js area
    	JavaScript::put([
    		'testname'=>'bonstutorial',
                'age'=>46,
                'data'=>$dataname
    	]);
    	return view('patient_details');
    }
    
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use JavaScript;

class PatientController extends Controller

{

public function view_patient(){

$dataname='today is holiday';

//following line sent or pass these variables direcly to js area

JavaScript::put([

'testname'=>'bonstutorial',

'age'=>46,

'data'=>$dataname

]);

return view('patient_details');

}

create a view file patient_details.bade.php
in patient_details.blade.php , add @include(‘footervarview’)

<!DOCTYPE html>
<html>
<head>
    <title></title>

</head>
<body>
php var js 

@include('footervarview')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript">
    
    $(document).ready(function(){
     
        console.log(windowvar.testname);
        console.log(windowvar.age);
        console.log(windowvar.data);
 
    })
</script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

php var js

@include('footervarview')

$(document).ready(function(){

console.log(windowvar.testname);

console.log(windowvar.age);

console.log(windowvar.data);

})

</script>

</body>

</html>

See video in youtube

Share with: