How to use Laravel Variable in Javascript?

Sep 09, 2022 . Admin

Hi Guys,

This post is focused on how to use laravel variable in javascript?. I would like to share with you laravel variable in jquery blade. this example will help you laravel print variable in jquery. if you have question about laravel blade variable in javascript then I will give simple example with solution.

You can use this example with laravel 6, laravel 7, laravel 8 and laravel 9 versions.

Sometimes, we need to print the laravel variable in the blade file jquery or javascript section. Then I will give you quick tips to access the laravel variable to the jquery code. we will take three variables string value, integer value, and array value. so let's see both simple examples below:

Example 1:

Blade File Code:

<!DOCTYPE html>
<html>
<head>
</head>
    <title>How to use Laravel Variable in Javascript? - Mywebtuts.com</title>
<body>
</body>
  
@php
    $name = "Jaydeep Pathar";
    $number = 13;
@endphp 
  
<script type="text/javascript">
    
    var name = "{{ $name }}";
    console.log(name);
  
    var name = "<?php echo $name ?>";
    console.log(name);
  
    var number = "<?php echo $number ?>";
    console.log(number);
  
</script>
</html>

Output:

Jaydeep Pathar
Jaydeep Pathar
13

Example 2: Controller File Code:

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\Post;
  
class PostController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index(Request $request)
    {
        $posts = Post::take(5)->get();   
  
        return view('posts', compact('posts'));
    }
}

Blade File Code:

<!DOCTYPE html>
<html>
<head>
    <title>How to use Laravel Variable in Javascript? - Mywebtuts.com</title>
</head>
<body>
</body>
   
<script type="text/javascript">
    
    var posts = "{{ Js::from($posts) }}";
    console.log(posts);
  
    var posts = ;
    console.log(posts);
    
</script>
</html>

Output: