How to pass an array as a URL parameter?

Question

I would like to pass an array and added to a link on my page as a URL parameter, because later on the server side I need the values from the array. How should I do that?

myArray = ['aaa', 'bbb', 'ccc'];

$('#myLink').attr({"href" : '/myLink?array=' + myArray});

I am not sure if that is the proper way of doing this?

*"How should I do that?"* That really depends on what server side language you are using and how it expects the data to be formatted. E.g. does the server expect JSON? Or a parameter per value? A comma separated list of values? Something else? — Felix Kling, Nov 08 '16 at 17:35
Since you're using jQuery, you can try `$.param({ array: myArray }, true);` — haim770, Nov 08 '16 at 17:36
The answer is you can't, not with Javascript. All solutions you end up would not be actually something you would pass. What you can do is pass an array like parameter and throw back with you server side languague. Why you need to pass the entire array anyway? — Marco, Nov 08 '16 at 17:37
https://stackoverflow.com/questions/18417265/how-to-send-an-array-via-the-url-in-javascript-jquery Check the above link. — Okkyajy, Jun 14 '19 at 11:48

rodrigocfd · Answer 1 · 2016-11-08T17:51:00.400

82

You can serialize the JSON:

myArray = ['aaa', 'bbb', 'ccc'];
var arrStr = encodeURIComponent(JSON.stringify(myArray));
$('#myLink').attr({ href: '/myLink?array=' + arrStr });

If your parsing (on the next page) is done via JavaScript too, you'll conversely use JSON.parse(). In PHP it would be json_decode().

edited Nov 08 '16 at 17:51

answered Nov 08 '16 at 17:43

rodrigocfd

6,450
6
34
68

"encodeURIComponent" is a standard js function? – R.Akhlaghi Feb 15 '21 at 11:12
1

@rezaakhlaghi: yes, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent – SaeX Mar 06 '21 at 14:56
In PHP I've used `urldecode()` as well to convert it all back. So it's `json_decode(urldecode($your_query_string))` – rCgLT Jul 25 '23 at 13:58

score 22 · Answer 2 · answered Nov 08 '16 at 17:46

22

try this

$('#myLink').attr({"href" : '/myLink?array=' + myArray.join(',')});

on server: capture and split data.

answered Nov 08 '16 at 17:46

JohnTrack

389
1
5

Little Santi · Answer 3 · 2016-11-13T19:32:06.360

17

It should not depend on the server side: By the URI standard specification, all parameters must have one name and should have one value. But there can be several parameters with the same name, which is the right way to serialize an array:

http://server/context?array=aaa&array=bbb&array=ccc&otherparameter=x

You could do it like this:

var s="";
for (var i=0;i< myArray.length;i++)
{
  s+="&myArray="+myArray[i];
}
var url="http://server/context?"+s;

edited Nov 13 '16 at 19:32

answered Nov 08 '16 at 18:11

Little Santi

8,563
2
18
46

3

this good but need to edit `s+="&myArray="+myArray[i];` to `s+="&myArray[]="+myArray[i];` – megyptm Apr 22 '20 at 08:02
1

@megyptm No, not at all. My approach will produce multiple values to parameter named "myArray". As you say, it would be to a parameter named "myArray[]". – Little Santi Apr 22 '20 at 10:33
1

Why not use `URLSearchParams`? with methods `.append` and `.toString` – Diego Lope Loyola Nov 15 '21 at 18:44

score 14 · Answer 4 · answered Mar 06 '19 at 07:27

I'd go with this approach,

var myArray = ['aaa', 'bbb', 'ccc', ];

var myArrayQry = myArray.map(function(el, idx) {
    return 'myArray[' + idx + ']=' + el;
}).join('&');

// myArray[0]=aaa&myArray[1]=bbb&myArray[2]=ccc

Then, I retrieve the URL query params as an array on the server side.

StefanBob · Answer 5 · 2021-05-25T18:09:49.093

3

How to pass an array of strings as URL parameters:

const myLink = 'https:/example.com/api'
const myArray = ['aaa', 'bbb', 'ccc'];
let apiUrl = `${myLink}/query?`;

myArray.forEach((x, i) => {
  if (i === 0) {
    apiUrl += `array=${x}`;
  } else {
    apiUrl += `&array=${x}`;
  }
});

console.log(apiUrl);
document.body.innerHTML = apiUrl;

edited May 25 '21 at 18:09

answered Aug 17 '20 at 17:55

StefanBob

4,857
2
32
38

score 1 · Answer 6 · answered Oct 12 '21 at 09:18

My approach:

var myArray = ['aaa', 'bbb', 'ccc'];
var baseUrl = '/myLink';
var paramName = 'array=';

var arrayAsString = '?' + paramName + myArray.join('&' + paramName);
var urlWithParams = baseUrl + arrayAsString;

window.location.href = urlWithParams;

score 0 · Answer 7 · answered Mar 30 '22 at 10:42

One another way to do that is as the following

import Router from 'next/router'

Router.push({
  pathname: '/search',
  query: {searchTerm: searchRef.current ? searchRef.current["value"] : '', codeSets: JSON.stringify(selectedCodeSets)}
}, '/search');

selectedCodeSets in this example is an array from state data

const [selectedCodeSets, setSelectedCodeSets] = useState<any>(['1']);

We can parse that data in the directed page like below

import {withRouter} from 'next/router'

const DaComponent = (props) => {
  useEffect(() => {
        let codeSets = JSON.parse(props.router.query.codeSets);
  }, [props.router]);
};

export default withRouter(DaComponent);

score 0 · Answer 8 · answered May 18 '22 at 08:00

myArray = ['aaa', 'bbb', 'ccc'];
myArrString = JSON.stringify(myArray.join("_"))

$('#myLink').attr({"href" : `/myLink?array=${myArrString}`});

And then when you need it later on you can parse it and then get back your array like so

JSON.parse(myArrString).split("_")

How to pass an array as a URL parameter?

8 Answers8

Linked