laravel - Passing a PHP variable to JavaScript in a Blade template

Question

is there any ways that JavaScript can get the variable from the controller in a Laravel Blade template?

Example: I have the code below:

$langs = Language::all();
return View::make('NAATIMockTest.Admin.Language.index',compact('langs'));

Can I get $langs and pass it to JavaScript? I already used PHP-Vars-To-Js-Transformer. But when I use JavaScript::put() for two functions in the controller. It didn't work. Any help?

This is my create function in the controller:

public function create()
{
    $names = $this->initLang();
    Javascript::put([
        'langs' => $names
    ]);
    
    return View::make('NAATIMockTest.Admin.Language.create',compact('names'));
}

this is my view:

@extends('AdLayout')
@section('content')
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('langCtrl', function($scope) {
        $scope.languages = langs;
    });
</script>
    
<div class="container-fluid" ng-app="myApp" ng-controller="langCtrl">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2>Create language</h2>
                </div>
                    
                <div class="panel-body">
                    {!! Form::open() !!}
                        <p class="text-center">
                            {!! Form::label('Name','Language: ') !!}
                            <input type="text" name="searchLanguage" ng-model="searchLanguage">
                        </p>
    
                        <select name="Name[]" multiple size="10" ng-model="lang" ng-click="show()">
                            <option value="@{{v}}" ng-repeat="(k,v) in languages | filter:searchLanguage">
                                @{{v}}
                            </option>
                        </select><br>
    
                        <div class="text-center">
                            {!! Form::submit('Create',['class'=>'btn btn-primary']) !!}&nbsp;
                            {!!   Html::linkAction('NAATIMockTestLanguageController@index', 'Back', null, array('class' => 'btn btn-primary')) !!}
                        </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

my javascript.php in config folder:

<?php
return [
    'bind_js_vars_to_this_view' => 'footer',
    'bind_js_vars_to_this_view' => 'NAATIMockTest.Admin.Language.create',
    'bind_js_vars_to_this_view' => 'NAATIMockTest.Admin.Language.edit',
    
    'js_namespace' => 'window',
];

The idea is: I have a table language in MySQL. I want to show the dropdown list with multiple attributes to choose, and I also want to search with angularjs as well. That's why I want to pass the variable from the controller to JavaScript. Additionally, I have the function inside LanguageController called initLang to check if any language is exist inside the database, it isn't displayed inside the dropdown list in create the view.

Answer 1

One working example for me.

Controller:

public function tableView()
{
    $sites = Site::all();
    return view('main.table', compact('sites'));
}

View:

<script>    
    var sites = {!! json_encode($sites->toArray()) !!};
</script>

To prevent malicious / unintended behaviour, you can use JSON_HEX_TAG as suggested by Jon in the comment that links to this SO answer

<script>    
    var sites = {!! json_encode($sites->toArray(), JSON_HEX_TAG) !!};
</script>