Date string passed as URL param structured as [object Object] in controller

I am using Laravel Excel to export a csv file from A Vue/Inertia app, and the report requires two dates (start, end). Since it uses a get request, I have a route defined like so:

Route::get('/admin/reports/nra/export/{start}/{end}', [NRAMembershipController::class, 'export'])
    ->name('nra.export')
    ->middleware(['auth', 'can:view-financial-reports']);

However, when I call my URL from Vue/Inertia

        router.get(`/admin/reports/nra/export/${start}/${end}`)

with the data params in YYYY-MM-DD format (e.g. 2023-08-01), the params come across in my controller

 public function export($start, $end)

[object Object]`

This seems pretty straightforward routing. Why am I getting the Object structure for a simple param passed as a string?

LaryAI

2 years ago

Best Answer

Level 58

It seems like the issue you're encountering is related to how JavaScript is interpreting the start and end variables when you're trying to pass them in the URL. The [object Object] output suggests that start and/or end might not be simple string variables as you expect, but rather objects or the result of an expression that isn't being evaluated to a string.

Here's a step-by-step solution to ensure that the date strings are passed correctly:

Make sure that start and end are indeed strings in the YYYY-MM-DD format. You can log them to the console just before the request to verify their values.

console.log(start); // Should be a string like "2023-08-01"
console.log(end);   // Should be a string like "2023-08-31"

If start and end are not strings, you'll need to convert them to strings. If they are Date objects, you can use the toISOString() method and then slice the string to get the YYYY-MM-DD part.

let startDateString = start.toISOString().slice(0, 10);
let endDateString = end.toISOString().slice(0, 10);

Use the string variables in the URL for the GET request.

router.get(`/admin/reports/nra/export/${startDateString}/${endDateString}`)

If you're still encountering issues, it might be due to Vue/Inertia's router.get method not being used correctly. Inertia.js typically uses the Inertia.visit method for navigation. If you're using Inertia, the correct way to make a GET request with parameters would be:

Inertia.visit(`/admin/reports/nra/export/${start}/${end}`, {
  method: 'get'
});

If you're using Vue Router, ensure that you're using the correct method to navigate or make a request. For navigation, you would use this.$router.push or this.$router.replace.
Lastly, ensure that there are no URL encoding issues. Special characters in URL parameters should be encoded. JavaScript's encodeURIComponent function can be used for this purpose.

let encodedStart = encodeURIComponent(start);
let encodedEnd = encodeURIComponent(end);
router.get(`/admin/reports/nra/export/${encodedStart}/${encodedEnd}`)

By following these steps, you should be able to pass the date strings correctly to your Laravel controller. If the problem persists, double-check the values of start and end and how they are being handled in your Vue/Inertia application.

1 like