Using JavaScript to display Laravel's Variable

Question

In my code I am using typeahead.js. I use Laravel 5 and I need to replace the var states with my {{ $jobs }} variable. I need to list all Job Titles as an array.

In my controller I have

$jobs = Job::all(['job_title']);

I know the loop method in javascript but I dont know how to "link" my blade's variable in the javascript. Anyone knows how to?

I have tried, in my.js

var jobs = {{ $jobs }}

But that wont work.

Solution 1

For more complex variable types like arrays your best bet is to convert it into JSON, echo that in your template and decode it in JavaScript. Like this:

var jobs = JSON.parse("{{ json_encode($jobs) }}");

---

Note that PHP has to run over this code to make it work. In this case you'd have to put it inside your Blade template. If you have your JavaScript code in one or more separate files (which is good!) you can just add an inline script tag to your template where you pass your variables. (Just make sure that it runs before the rest of your JavaScript code. Usually document.ready is the answer to that)

<script>
    var jobs = JSON.parse("{{ json_encode($jobs) }}");
</script>

If you don't like the idea of doing it like this I suggest you fetch the data in a separate ajax request.

Solution 2

This works for me

jobs = {!! json_encode($jobs) !!};

Notice

Only use this method if you can guarantee that $jobs contains no user input values. Using {!! ... !!} outputs values without escaping them which could lead to cross-site scripting (XSS) attacks.

Solution 3

in laravel 6 this works for me

using laravel blade directive

var jobs = {!! json_encode($jobs) !!};

also used @json directive

var jobs = @json($jobs);

using php style

 var jobs = <?php echo json_encode($jobs); ?>

Solution 4

Just to add to above :

var jobs = JSON.parse("{{ json_encode($jobs) }}");

will return escaped html entities ,hence you will not be able to loop over the json object in javascript , to solve this please use below :

var jobs = JSON.parse("{!! json_encode($jobs) !!}");

or

var jobs = JSON.parse(<?php echo json_encode($jobs); ?>);

Solution 5

In laravel 7 I just do

var jobs = '{{ $jobs }}';

View more solutions

Comments

[Sylar]

Thanks for that but I got this in the console: SyntaxError: JSON.parse: expected property name or '}' at line 1 column 2 of the JSON data

[lukasgeiter]

Can you take a look at the source code of the page and see what's actually passed to JSON.parse?

[Sylar]

It points to var jobs = JSON.parse("{{ json_encode($jobs) }}")

[lukasgeiter]

But this is inside a blade template isn't it?

[Sylar]

No. I have created a .js file and put the code there.

[lukasgeiter]

Well that is obviously not gonna work. If you want to pass PHP variables to JavaScript you have to do it where PHP actually runs.

[Sylar]

So I have to put the js in my page.blade.php?

[lukasgeiter]

Yes. you know PHP and JavaScript can't really talk to each other. What we're doing here is actually just generating JavaScript code (the variable definition) with PHP and echoing the variable out. So you have to do it somewhere PHP runs. And in a separate JS file that's not the case. I hope I explained that well ;)

[Sylar]

Ok let me make few changes. Thanks.

[mp31415]

Assuming that $jobs is not client controlled and is safe from all kind of injections.

[Peter Chaula]

@lukasgeiter can you not simply var jobs = {!! json_encode($jobs); !!}; ?

[PaoloCargnin]

If some string inside the array $jobs has characters this solution won't work.

[T.Palludan]

This works, but it concerns me, since I DO have user input values in my $jobs value. Can you edit the answer to include what to do if you have user input?

[Oluwaseyitan Baderinwa]

did the job for me. Thanks for this. Noted on the XSS attacks notice.

[Deepak Daniel]

This is a very good explanation and very helpful for people who are confused why there is an syntax error when they have the variable is accessed in a separate JS file. Also var jobs = {!! json_encode($jobs); !!}; works.

[nima]

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: stackoverflow.com/help/how-to-answer . Good luck 🙂