A guide on sending arrays from javascript to a Laravel controller through axios

Currently, I am utilizing Laravel 5.4 and Vue 2 to manage my data. I am facing an issue where I need to call a controller method using axios while passing two arrays. These arrays are crucial for making database requests in the controller and retrieving necessary data.

Although I have been able to pass the arrays as strings, I would prefer not to transform them back into arrays within the controller.

I am wondering if there is a way to achieve the same result but directly passing the arrays instead of converting them into strings first. Is this feasible at all?

Here's the Axios call made from Vue:

$rutas = ["01", "02"];
$tipos = ["01", "03", "04"];

var params = new URLSearchParams();
params.append("rutas", $rutas);
params.append("tipos", $tipos);

var request = {
  params: params
};
axios.get('/test/', request);

Defined route:

Route::get('/test/', 'TestsController@getClientesPorRuta');

This snippet showcases the method within my controller:

public function getClientesPorRuta(Request $request) {
  $rutas = $request->input('rutas');
  $tipos = $request->input('tipos');
  
  // The following code illustrates the issue faced when attempting to access array elements
  $index = 0;
  $register = Ruta::where('CODIRUTA','=',$rutas[$index])->first();
}

Answer №1

you don't need to convert the array to a string in order to pass it, you can simply pass it directly.

var request = {
  rutas: $rutas,
  tipos: $tipos,
};
axios.post('/test/', request);

It's recommended to use axios.post instead of axios.get because the get method uses the URL to pass data and URLs cannot contain arrays, so they are converted to strings (like '1,2').

Also, make sure to change Route::get to Route::post in your routes file.

Route::post('/test/', 'TestsController@getClientesPorRuta');

Now in your PHP code, $request->rutas is already set as ["01", "02"].

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for displaying a div adjacent to a password input field?

I am attempting to display a password verification box next to an input field. The current logic is functioning properly, but the box containing all password requirements is not appearing in the correct position. Instead of being positioned adjacent to the ...

Calculating the total of table elements with vuejs

I'm currently working with Vue.js and I need to calculate the total amount in a table that includes quantity, unit price, and their totals. I want to achieve this by looping through the database elements and using v-if to filter out certain elements. ...

What steps should I take to address this 'key' alert?

My browser console is displaying the following error message: Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information. ExpenseList@http://localhost:3000/main.cfec1fef7369377b9a ...

What is the process for sending an HTTP request within the Dialogflow -> Fulfillment environment?

When it comes to interacting with the API of my website to rectify the response for Google Assistant, I am facing some difficulties. 'use strict'; var requestNode = require('request'); const functions = require('firebase-function ...

Tips on incorporating CKEditor4 wiris MathML formulas into react JS

I am having trouble displaying MathML in the DOM. When I try to render it, the output is not showing correctly in the Editor. I am utilizing CKEditor4 Let me share the code below to provide more context on what I have attempted so far App.js file: impo ...

Creating mesmerizing noise animation using THREE.FilmPass() in Three.js

Chapter Eleven of my Learning Three.js book showcases a fascinating noise animation created by the author using var effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false); In the code example from the book, it is interesting to note that removing the orb ...

Attempting to craft a multi-filter feature using AngularJS that will allow for the precise filtering of JSON data based on both month and year identifiers

I have integrated AngularJS into the RoR framework and am working on creating a multi-filter for the "ng-repeat" function to filter JSON data based on "month_id" and "year_id". Here is the current code: JSON: [ { "date":"October 4, ...

JavaScript alert causing disruption to Ajax requests

Currently, I am utilizing JQuery Ajax to retrieve a script from the server. $.ajax({ url: src, type: "GET", dataType: "script", timeout: transaction_timeout }).done(function(){}) .fail(function() { alert("Error in server");}) .always(funct ...

NextJS is encountering an issue with Axios' withCredentials functionality

I'm facing an issue where Axios is not sending the cookie to my backend API, even though I have set the withCredentials properly. Front-end (NextJS): import axios from "axios" const BASE_URL = "http://localhost:8000" export defa ...

Issues with Ajax response being added to the table

I am encountering a technical problem with my university project. The task assigned by the professor is as follows: We need to create a static table that lists 3 domain names in order to enhance the performance of the domain availability API. <table&g ...

Verify that the JSON data contains the desired data type before adding it to jQuery

I'm working with JSON data extracted from an Excel file. I need to match the First Name in the JSON data with the 'First Name' field and append those elements to a specific div. Additionally, if the JSON data includes a 'status', I ...

When making jQuery Ajax calls, the $_POST variable may be empty and a warning about headers already being sent may also

I've been working on a PHP project and encountered an issue with sending data from an HTML page using jQuery Ajax to another PHP page. After numerous attempts to debug the problem, I still can't figure out why $_POST is empty when I try to echo. ...

Automated pagination integrated with automatic refreshing of div every few seconds

I am currently working on setting up a datatable and I need it to be displayed on the monitor in such a way that it can refresh the div and automatically paginate to the next page. However, whenever the div is refreshed, the auto-pagination gets cancelle ...

Tips on updating the default checkbox dynamically based on the current checkbox using JavaScript

Seeking to enhance the design of a Perl-generated form with custom CSS effects, rather than relying on the default Perl form. Despite successful functionality, encountering an issue where radio button focus reverts to default selection (Date) after submitt ...

Angular: promptly exit out of ngClick event handler

I have a selection menu on my webpage that is essentially an unordered list, with each item in the menu formatted like this: <li ng-click='doCalc(5)'>Five</li> The doCalc function that is triggered by clicking on these items may tak ...

Ways to retrieve the data from promises after they have been resolved?

I'm struggling to retrieve the values from getPeople(0,4). function getPeople(start, end) { const peopleArray = []; for (let i = start; i <= end; i++) { peopleArray.push( axios.get(`https://www.testsite.net/api/test/workers/ ...

Guide on converting JSON to CSV in React by utilizing the map function

When I convert JSON data to CSV by clicking a button, it currently stores the data in the CSV file separated by commas. However, I want each piece of data to be on its own line. How can I achieve this? For example: Minor,Minor What I Want: Each item on a ...

How can the entire menu be closed in Bootstrap 5 when clicking on a link or outside of the page?

I'm currently utilizing BootStrap 5 for constructing my webpage. Within my page, I have a NavBar Menu containing various links. <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

Implementing nested popup windows using Bootstrap

I am facing an issue with my two-page sign-in and sign-up setup in the header of my angular2 project. On the sign-up page, I have a link that should redirect to the sign-in page when clicked, but I am struggling to make it work. Can someone provide guidanc ...

Place the retrieved data from the API directly into the editor

I've integrated the LineControl Editor into my app and everything is functioning perfectly, except for when I attempt to insert text into the editor. Here's the link to the LineControl GitHub page: https://github.com/suyati/line-control/wiki Fo ...