Create a Javascript Object Array from URL Parameters

October 3, 2018

Passing information from one page to another can be tedious. Does the information need to be stored in localStorage? In a cookie? How will it be accessed by javascript? Can it only be accessed by a backend language like PHP?

Let’s pass them along in the web address bar and grab them with javascript!

The Setup

To easily pass values from one page to another, we’ll create a quick form. Setting this form to the “get” method will automatically toss those values in the URL.

<form>
<input type="text" name="first_name"><br />
<input type="text" name="last_name"><br />
<input type="hidden" name="current_page" value="Contact Us">
<input type="submit" value="Submit">
</form>

In this example, we have a contact-type form that asks for a first and last name and passes the current page value along as well for good measure. We want to use those values on our thank you page and will pull them in via javascript.

The URL

Once that form is submitted, we end up with something like this:

http://example.com/thank-you/?first_name=John&last_name=Doe&current_page=Contact%20Us

Awesome! Let’s break this back down in javascript and put together an object array of values!

A Javascript Object

First thing we’ll do is declare the object itself.

let form_values = {}

Then we start the process of breaking apart the URL string. First, we can grab the entire string of URL parameters. (I’ve chosen to also include the “.substring(1)” piece to start grabbing the string after the question mark.)

let url_string = location.hash.substring(1);

Then, we turn that string into an array of the pieces. Note that this is an array of each key value string, but those will still need to be broken down further into true key value pairs. The “.split()” javascript function will do the work here, splitting at the ampersands (&).

let url_string_array = url_string.split('&');

Now, we just need to loop through each of those and split them again at the equals sign (“=”) and set the string before the equals sign as the key to a new item in our original “form_values” object and the string after the equals sign as the value.

url_string_array.forEach(function( value ){
	let this_item = value.split('=');
	let this_key = this_item[0];
	let this_value = this_item[1];
	form_values[this_key] = unescape(this_value);
});

You can see in the code above that we loop through the key=value strings and split them at the equals sign. We tell “this_key” to be the content before the equals sign and “this_value” to be the content after. Then, we assign those within the “form_values” array we set up earlier.

*Note: to clean up things like “%20” being a space, I also used the javascript “unescape()” function to decode the URL html entity strings.

Wrap Up

And that’s all there is to it! From here, we end up with a javascript object that looks a little something like this:

{
  current_page: "Contact Us",
  first_name: "John",
  last_name: "Doe"
}

Then, if you need one of those values, you can call it like this:

Your first name is: form_values['first_name']

Wanna chat about this article or any others? Feel free to DM me or mention me on Twitter @marcusdburnette to start a conversation!

Leave a Reply

Your email address will not be published. Required fields are marked *