Laravel: how to pass variable to JavaScript file?

Question

I want to show on the chart the number of new students registered and the number of online students per month. I got the data but I don't know how to transfer data into js file to draw that chart. My js file is in the public directory and I have connected to js file but I don't know how to pass data to it.

My controller to get data

class DashboardController extends AdminBaseController
{
    public function index () 
    {
       $month = 1;
       $totalNewStudent = [];
       $totalOnline = [];
       $totalActive = [];
       for($i = $month; $i < 13; $i++) {
       //count new students
       $newStudents = Member::where('member_type_id',1)- 
       >whereMonth('created_at', $i)->get();
       $totalNewStudent[$i] = $newStudents->count(); 

       //students online
       $onlStudents = Member::where('member_type_id',1)- 
       >whereMonth('updated_at', $i)->get();
       $totalOnline[$i] = $onlStudents->count(); 

       // count card active
       $act = Order::where('status', "active")->whereMonth('updated_at', $i)- 
       >get();
       $totalActive[$i] = $act->count(); 
       return view('admin.dashboard.index', compact('totalNewStudent','totalOnline','totalActive '));
      }
    }
}

view admin.dashboard.index

<div class="card-body collapse in">
    <div class="card-block">
        <div id="products-sales" class="height-300"></div>
    </div>
 </div>

Js file

var months = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
    Morris.Area({
        element: 'products-sales',
        data: [{
            month: '2017-01',
            newstudent: 0,
            online: 0,
        }, {
            month: '2017-02',
            newstudent: 240,
            online: 0,
        }, {
            month: '2017-03',
            newstudent: 0,
            online: 0,
        }, {
            month: '2017-04',
            newstudent: 0,
            online: 190,
        }, {
            month: '2017-05',
            newstudent: 0,
            online: 25,
        }, {
            month: '2017-06',
            newstudent: 0,
            online: 150,
        }, {
            month: '2017-07',
            newstudent: 0,
            online: 0,
        },{
            month: '2017-08',
            newstudent: 80,
            online: 0,
        },{
            month: '2017-09',
            newstudent: 0,
            online: 0,
        },{
            month: '2017-10',
            newstudent: 0,
            online: 0,
        },{
            month: '2017-11',
            newstudent: 300,
            online: 0,
        },{
            month: '2017-12',
            newstudent: 0,
            online: 0,
        }],
        xkey: 'month',
        ykeys: ['newstudent', 'online'],
        labels: ['New Student', 'Online'],
        xLabelFormat: function(x) { // <--- x.getMonth() returns valid index
            var month = months[x.getMonth()];
            return month;
        },
        dateFormat: function(x) {
            var month = months[new Date(x).getMonth()];
            return month;
        },
        behaveLikeLine: true,
        ymax: 300,
        resize: true,
        pointSize: 0,
        pointStrokeColors:['#00B5B8', '#FA8E57', '#F25E75'],
        smooth: true,
        gridLineColor: '#E4E7ED',
        numLines: 6,
        gridtextSize: 14,
        lineWidth: 0,
        fillOpacity: 0.9,
        hideHover: 'auto',
        lineColors: ['#00B5B8', '#FA8E57', '#F25E75']
    });

Mateus Junges · Accepted Answer · 2019-10-05 16:08:12Z

2

The easiest way:

Add your variable to the input element:

<input type="hidden" value="{{ $my_variable }}" id="my-variable">

Get the value using js:

let myVar = $("#my-variable").val();

Personally, i don't like this approach. The best one is to use ajax and get your variable direct from the server.

Hope it helps.

edited Oct 5, 2019 at 16:08

answered Oct 4, 2019 at 16:44

Mateus Junges

2,6121 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Achraf Khouadja · Accepted Answer · 2019-10-05 16:10:52Z

1

You return it as a PHP variable to the View that will have the JS file

And you add this to the view

// Do this before importing the JS file
var data = {!! json_encode($php_var) !!};

in Newer laravel versions

var data= @json($php_var);

Data will be available in the JS file

Or you can use this package

PHP-Vars-To-Js-Transformer

answered Oct 5, 2019 at 16:10

Achraf Khouadja

6,2994 gold badges29 silver badges40 bronze badges

Comments

Dip Ghosh · Accepted Answer · 2022-03-27 18:39:51Z

There are many ways, you can use the data. But good practice is that use the ajax call so that no page-load will happen.

The first approach is that create a hidden field and put the value there.

<input type="hidden" value="{{ $value }}" id="any-id">

Then call this hidden field with id or class

var value = $("#any-id").val();

The next approach is Directly called the value in the js block

var value = "{{ $value}}"

Or

var value = @json($value);

The third Approach is use any package like the below :

https://github.com/laracasts/PHP-Vars-To-Js-Transformer

Collectives™ on Stack Overflow

Laravel: how to pass variable to JavaScript file?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related