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

ashleywnj's avatar

Pass url parameter to js using laravel route or controller

I have a Vue table - I would like to select an item in a row and then load a page that shows the details for the item using Chart.js

I can select the item and load the json for the selected record OR I can load the page passing the url and hard code a record ID in the js file - struggling to understand how to load the detail passing the record ID.

To load the json for the record the following code works: . . .

    <tbody>
      <tr v-for="item in items | filterBy searchText | orderBy sortparam order">
        <td>@{{item.provider_name}}"</td>
        <td>@{{item.city}}</td>
        <td>@{{item.rating}} %</td>
        <td>@{{item.discussed}} %</td>
        <td>@{{item.communicated}} %</td>
        <td>@{{item.professional}} %</td>
        <td><a href="/surveyvisual/@{{item.ccn}}" > @{{item.ccn}}  </a></td>
      </tr>
    </tbody>

...

And to return the json

...

public function show($ccn)
{
    $ccn = Provider::where('ccn', '=', $ccn)->get()->toArray();

}

...

If I hard code the parameter in the js file rendering the chart then I can load the page and show the details - the following code brings in the correct data

...

var apiVisURL = '[url to return json]';

function test() {
  return $.getJSON(apiVisURL + '77001');
}

$.when(test()).then(function (myData) {
var canvas = document.querySelector('canvas');
fitToContainer(canvas);

    function fitToContainer(canvas){
  // Make it visually fill the positioned parent
  canvas.style.width ='50%';
  canvas.style.height='100%';
  // ...then set the internal size to match
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}
    Array.prototype.mapProperty = function(property) {
      return this.map(function (obj) {
      return obj[property];
   });
 };

...

Obviously more code in the above to set al the data elements of the chart - and the chart renders correctly for the record I have hardcoded.

Any hints or recommendations on how to pass the selected record id to the js file building the chart appreciated.

UPDATE: I should have stated that I have to js files - one for the Vue to render the table and one for the Chart.

0 likes
6 replies
ashleywnj's avatar

I modified the show to only return the ID of the json recordset:

 public function show($ccn)
    {
        $ccn = Provider::where('ccn', '=', $ccn)->pluck('ccn');

        //return ($ccn);
        return view('surveyvisual', compact('ccn', 'data'));
    }

Still struggling to pass the value as a variable in place of the hardcoded id within the js file

var apiVisURL = '/surveyvisual/';

function test() {
  return $.getJSON(apiVisURL + '77001');
}
ashleywnj's avatar

So I got it to work - but it feels like an ugly hack:

In the views controller I have:

...

 public function show($ccn)
    {
        $ccn = Provider::where('ccn', '=', $ccn)->pluck('ccn');
            return view('surveyvisual', compact('ccn', 'data'));
    }

...

Then in the view I assign the variable to the id of a hidden input

...

<input type="hidden" id="providerCCN" value={{$ccn}} />

...

I then grab the variable using getElementbyId and append to the api call - it works and it is fast ... but doesn't seem elegant or 'right"

.....

 var apiVisURL = '[url to return json]';
$ccn = document.getElementById('providerCCN').value;

function test() {
  return $.getJSON(apiVisURL + $ccn);
    }

.....

it is a work in progress: http://artt-insight.com/ and requires a lot of refactoring

jekinney's avatar
Level 47

With vue you can pass the specific object on click event. Use a button or a tag. Set up a method in vue.

In your current a tag remove the href and use role="button" and set a click event. At the end of your named method (item) which will pass the item and associated data into the method.

In your vue method set up your chart code to show your chart. I would set v-show with a couple of variables one for your table and one for your chart sections to toggle displaying either one as needed. No Ajax calls or page refreshes etc

1 like
jekinney's avatar

On a side note to get the browsers url window.location.href

jekinney's avatar

@ashleywnj N/P I guess in my mind it's gets so confusing to integrate php and javascript on the frontend I tend to try and not mix them as much as possible. So as I mentioned in your case, if it was me, I would just use Vue to manipulate the data and html as needed.

Please or to participate in this conversation.