How to get an array from the URL?

Question

I have put an array into my URL like this:

var params = arrayitems.join('&');
var url = "https://www.example.com/page?="+params;

So the URL looks like this:

https://www.example.com/page?=item1&item2&item3&item4&item5

Now does anyone know how I can then put these items back into an array on the next page?

Thanks!

shouldn't it be `https://www.example.com?page=item1&item2&item3&item4&item5` instead? Or something like that? query parameters needs a key. — kemicofa ghost, Jan 26 '19 at 15:46
Possible duplicate of [How to get the value from the GET parameters?](https://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters) and [How to obtain the query string from the current URL with JavaScript?](https://stackoverflow.com/questions/9870512) and [javascript get querystring](https://stackoverflow.com/questions/14463771) — adiga, Jan 26 '19 at 15:58
As with many questions, your question is actually too broad, because you've combined two separate things into one question. For what you are doing, the process is two steps A) Get the query string (for which a duplicate has been provided) and then B) split that string into an array (for which another duplicate was provided. If your query string didn't include the `=` character, then there would be another somewhat reasonable method of using [`URLSearchParams.keys()`](//developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/keys) to iterate through the keys to make an array. (continued) — Makyen, Jan 27 '19 at 00:53
Given that you control setting the query string, just getting the query string and splitting it is reasonable. However, using `URLSearchParams.keys()` would be a more robust solution that could be used to allow you to have multiple other parameters and/or avoid some issues with people hand editing in additional parameters, incorrectly. — Makyen, Jan 27 '19 at 00:53

score 7 · Answer 1 · answered Jan 26 '19 at 15:47

You can split them back by page?= and than &

let arrayitems = ['item1','item2','item3','item4','item5']
var params = arrayitems.join('&');
var url = "https://www.example.com/page?="+params;

let arrayBack = url.split('page?=')[1].split('&')

console.log(arrayBack)

kemicofa ghost · Answer 2 · 2019-01-26T16:29:09.030

URL Object:

Use URL to get the data you need from the search parameters.

URL is used to parse, construct, normalise, and encode URLs.

The URL object has a very convenient method called searchParams

The searchParams readonly property of the URL interface returns a URLSearchParams object allowing access to the GET decoded query arguments contained in the URL.

Quick solution:

not recommended... but works

Since your query parameters are not valid (no key, just values) an extra step is required to get the values.

const url = new URL('https://www.example.com/page?=item1&item2&item3&item4&item5');

const res = [...url.searchParams]
.flat()
.filter(v=>v!==null&&v.length>0);

console.log(res);

Better solution using valid URL:

It would be better if you instead organised your URL the following way, so that your url string would look like

https://www.example.com/page?item=item1&item=item2&item=item3

const params = ['item1','item2','item3']
.map(v=>'item='+v)
.join('&');

const urlStr = "https://www.example.com/page?"+params;

const url = new URL(urlStr);

//Two possible ways of getting the values
//Option 1
const resOption1 = url.searchParams.getAll('item');
//Option 2
const resOption2 = [...url.searchParams.values()];

console.log(resOption1);
console.log(resOption2);

DataCure · Answer 3 · 2019-01-26T16:26:45.707

JavaScript:

// Create the object which is an array
var output = new objPropertyAndValues;

var TempArray=[]; // blank array
// Lets grab the URL (windows.location.href)    
var url_string = window.location.href;
var url = new URL(url_string);

//We now have URL as an object to read from.
//Lets turn the searchParams into a string which we can then split into an Array

var urlParamsString = url.searchParams.toString();

//Now lets split urlParamsString into an array
var AllParamsFound = urlParamsString.split("&");

// Lets read each array item by doing a loop
// We then split the array item value by the "=" sign to split parameter and value

for (i = 0; i < AllParamsFound .length; i++){
    TempArray= AllParamsFound [i].split("=");
    output.Property[i] = TempArray[0];
    output.Value[i] = TempArray[1];
}

console.log(output);


//We allow an object to be created.
function objPropertyAndValues(){
    this.Property = [];
    this.Value = [];
}

Running Example:

// Create the object which is an array
    var output = new objPropertyAndValues;

    var TempArray=[]; // blank array
    // Lets grab the URL (windows.location.href)    
    var url_string = "http://www.google.com?myName=Datacure&AnswerID=54379924&Likes=Pizza";
    var url = new URL(url_string);

    //We now have URL as an object to read from.
    //Lets turn the searchParams into a string which we can then split into an Array
    
    var urlParamsString = url.searchParams.toString();

    //Now lets split urlParamsString into an array
    var AllParamsFound = urlParamsString.split("&");
    
    // Lets read each array item by doing a loop
    // We then split the array item value by the "=" sign to split parameter and value
    
    for (i = 0; i < AllParamsFound .length; i++){
     TempArray= AllParamsFound [i].split("=");
     output.Parameter[i] = TempArray[0];
     output.Value[i] = TempArray[1];
    }
    
    
    // Example output
    console.log (output.Value[0] + " should get " + output.Value[2] + " for answering question id: " + output.Value[1]);

    // View the array
    console.log(output);

    
    //We allow an object to be created.
    function objPropertyAndValues(){
     this.Parameter = [];
     this.Value = [];
    }

How to get an array from the URL?

3 Answers3

URL Object:

Quick solution:

Better solution using valid URL: