Javascript and php

I am using a drag and drop application called Gridstack.js for a dashboard. It works very well. Users can drag and drop widgets and resize with handles, etc. I am saving this data in the database via json field.

In the html there is a div

 <div class="grid-stack">

            </div>

The json is stored like this:

let serializedData = [
      {x: 0, y: 0, w: 2, h: 2, id: '0'},
      {x: 3, y: 1, h: 2, id: '1', content: "<button onclick=\"alert('clicked!')\">Press me</button>"},
      {x: 4, y: 1, id: '2'},
      {x: 2, y: 3, w: 3, id: '3'},
      {x: 1, y: 3, id: '4'}
    ];

Then it is loaded into the DOM like this:

 loadGrid = function () {
                    grid.load(serializedData, true); // update things
                }

When the layout is saved it is storing a hidden field that is populated with json.

public function store(Request $request)
    {
        $dashboard = auth()->user()->dashboard;
        $dashboard->layout = json_encode($request->dashboard);
        $dashboard->save();
        return back();
    }

The dashboard is loaded like this:

$data = json_decode($user->dashboard->layout);

        if(is_null($data)) {
            $data = '[]';
        }

The problem is the content in the json. I will be wanting to show query result and stuff like that as part of the contents. What would be the best way to do that? I cant call PHP from the javascript. Any help in this would be helpful.