Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

TruptMan-Solutions's avatar

Convert php array to json in blade file

Hey #laravel devs , how to convert php array to json in blade file?

Sometimes you just pass data to view template, and want to render it as JSON to initialize a javascript variable.

example: i am passing location collection from controller which have latitude and longitude address, which i need to display as markers on google map.

Js::from() blade directive will help us to get this done.

example

Tip

0 likes
7 replies
LaryAI's avatar
LaryAI
AI
1 year ago
Level 58

To convert a PHP array to JSON in a Blade file, you can use the Js::from() directive provided by Laravel. This directive is specifically designed to convert PHP data structures into JSON, making it easy to pass data from your backend to your frontend JavaScript code.

Here's a step-by-step solution:

  1. Pass the data from your controller to the view:

    In your controller, pass the location collection to the view:

    public function showMap()
{
    $locations = [
        ['latitude' => '40.712776', 'longitude' => '-74.005974', 'address' => 'New York, NY'],
        ['latitude' => '34.052235', 'longitude' => '-118.243683', 'address' => 'Los Angeles, CA'],
        // Add more locations as needed
    ];

    return view('map', compact('locations'));
}

  2. Use the Js::from() directive in your Blade file:

    In your Blade file (map.blade.php), you can convert the PHP array to JSON and initialize a JavaScript variable with it:

    <!DOCTYPE html>
<html>
<head>
    <title>Map</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Convert PHP array to JSON
            const locations = @json($locations);

            // Initialize the map
            const map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: { lat: 39.8283, lng: -98.5795 } // Center of the USA
            });

            // Add markers to the map
            locations.forEach(location => {
                new google.maps.Marker({
                    position: { lat: parseFloat(location.latitude), lng: parseFloat(location.longitude) },
                    map: map,
                    title: location.address
                });
            });
        });
    </script>
</head>
<body>
    <div id="map" style="height: 500px; width: 100%;"></div>
</body>
</html>

In this example:

  • The @json($locations) directive is used to convert the PHP array to a JSON object that can be used in JavaScript.
  • The locations JavaScript variable is initialized with the JSON data.
  • A Google Map is initialized and markers are added based on the latitude and longitude values from the locations array.

Make sure to replace YOUR_API_KEY with your actual Google Maps API key.

This approach ensures that your PHP data is seamlessly converted to JSON and can be used directly in your JavaScript code within the Blade template.

Snapey's avatar

just use @json

The forum is a place to ask questions and get help, not to share your self-promotions

1 like
TruptMan-Solutions's avatar

@Snapey hey , have you saw , i posted it under tips channel type.

And can any one tell me should i or any one using forum should share nice tips or not?

JussiMannisto's avatar

In what sense is this:

const locations = {{ Illuminate\Support\Js::from($locations) }}

Better than this:

const locations = @json($locations)

Or even this:

const locations = {{ json_encode($locations) }}
jlrdw's avatar

That site hosting your image is not safe according to virustotal? Why not have images on a good safe site?

Please or to participate in this conversation.