Continuing with our previous theme on views, let’s get back into Blade. We frequently work with JavaScript and need to utilize the array data that’s sent from our Laravel application to our Blade component. How do you transform that data from a Laravel type array to a JSON file?

https://www.dinocajic.com/laravel-p63-optimizing-views/

The first method is something that you’re most likely familiar with: json_encode. While this does work, there is a better way to do it and that’s utilizing the Js::from method. This method ensures that your JSON is properly escaped. If you’re running on a newer version of Laravel, you’ll be able to use the Js facade as is without specifying the entire path: Illuminate\Support\Js::from($array).

I’ll start off by creating a controller: JsonRenderingController

# php artisan make:controller JsonRenderingController

   INFO  Controller [app/Http/Controllers/JsonRenderingController.php] created successfully.

# 

Within the controller, I’ll create one method, index, and pass a collection of data to our view.

<?php

namespace App\Http\Controllers;

use App\Models\Car;
use Illuminate\Http\Request;

class JsonRenderingController extends Controller
{
    public function index()
    {
        $cars = Car::all();

        return view('json-rendering.index')->with('cars', $cars);
    }
}

The view will simply utilize the Js facade and asign the data to a variable.

<h1>Open Console to view results</h1>

<script>
    var json = {{ Js::from($cars) }};

    console.log(json);
</script>

Finally, we need a route to get us there.

<?php
use App\Http\Controllers\JsonRenderingController;

Route::get('/json-rendering', [JsonRenderingController::class, 'index']);

When you visit your route, open your console to see the result. You will see that the data was properly formatted.

Just in case you were wondering and forgot to include the Js::from to transform your array, you will get an error.

Uncaught SyntaxError: Unexpected token '&' (at json-rendering:4:18)

https://github.com/dinocajic/youtube-laravel