JavaScript - Getting query string values

Mar 29, 2017 JavaScript - Getting query string values

API, Javascript March 29, 2017

One of the key ingredients to an AJAX driven website is the ability to reliably get query string parameters. We will run through an example using the new URLSearchParams API and also a Javascript only implementation for legacy browsers.

Using the URLSearchParams Web API

Consider the url

http://www.systemoutofmemory.com?id=1&firstName=Bob&hobby=Baseball&hobby=Basketball

Get the query string params

var queryParams = new URLSearchParams(window.location.search);

Iterate & Log

for (var q of queryParams) {
  console.log(q);
}

Getters & Setters

queryParams.has("firstName"); // true
queryParams.has("lastName");  // false
queryParams.get("firstName")  // "Bob"
queryParams.getAll("hobby");  // ["Basketball", "Baseball"]
queryParams.append("job", "webdev"); 
queryParams.toString(); // ?id=1&firstName=Bob&hobby=Baseball&hobby=Basketball&job=webdev
queryParams.delete("job");
queryParams.toString(); // ?id=1&firstName=Bob&hobby=Baseball&hobby=Basketball

Using good ol' Javacsript

Consider the same url:

http://www.systemoutofmemory.com?id=1&firstName=Bob&hobby=Baseball&hobby=Basketball

Get the query string & split

var query = window.location.search.substring(1);
var queryParams = query.split("&");

Getting a query string parameter

function getQueryParam(param)
{ 
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if(pair[0] == param) {
             return pair[1];
        } 
    } 
    return(false);
}

getQueryParam("firstName"); // "Bob"
getQueryParam("lastName");  // false

admin API array async Birthday BookGuide Button bytes c# c# enum to int c# int to enum c# int to string c# iterate dictionary c# loop through dictionary c# outofmemoryexception c# run as admin C++ cast cheatsheet CLASSPATH compare convert int to string Dad Dictionary editor enum exception exit Fathers Day for for loop foreach generic Gift gift guide Git global Guide HTML INNER JOIN int iterate Java java.lang.OutOfMemoryError Javascript jQuery JSON KnockoutJS list loop MERGE nested loop outofmemory PHP PHP Redirect PowerShell programmer gift programmer mugs programmer shirts programmer stickers python python bytes to string python external command python for loop python int to string quit random Redirect repr() shell command SQL SQL Server STDIN STDOUT str() string switch system.outofmemoryexception c# systemoutofmemory type UPDATE variables vi vim _