I swear! Meerkats can do Linux

Converting a URL string into Json

Leave a comment

I was making a website the other day and I wanted to somehow pass variables that can be read with javascript. So if the user browsed to, the variables height and width should be read from javascript. Note that this method of passing the variables in the URL is used most notably for CGI, aka server-side scripting(PHP anyone?).


So I was a bit puzzled while looking around at stackoverflow as many people do think that there is something magical about Json. Json is nothing more than a standard on how things are stored. The standard pretty much sums up to this:

  1. Variables are stored as varName = value
  2. Arrays are stored as arrayName = [value1, value2, value3 .. ]
  3. A value can be: a number, a string, true, false, none
  4. The whole thing is encapsulated in wavy braces

For my example, the Json structure(after parsing the URL string) should look like this:

   "height": "100px"
   "width" : "50px"

In this case the values are strings. Keep in mind however that according to the standard, they could be anything between a number, a string, true, false and none.

My parser

So to get this structure from the URL, I needed some kind of parsing. All the solutions I found either used regular expressions, or they wanted a whole library to be imported, or just didn’t support arrays. So I made up my own ugly solution.

The function url2json() uses pure JavaScript code which doesn’t use regular expressions and accepts both arrays and variables:

function url2json(url) {
   var obj={};

   function arr_vals(arr){
      if (arr.indexOf(',') > 1){
         var vals = arr.slice(1, -1).split(',');
         var arr = [];
         for (var i = 0; i < vals.length; i++)
         return arr;
         return arr.slice(1, -1);

   function eval_var(avar){
      if (avar[1].indexOf('[') == 0)
         obj[avar[0]] = arr_vals(avar[1]);
         obj[avar[0]] = avar[1];

   if (url.indexOf('?') > -1){
      var params = url.split('?')[1];
      if(params.indexOf('&') > 2){
         var vars = params.split('&');
         for (var i in vars)

   return obj;

To keep things clean, all values are parsed into strings. As the input of the function is a string it just makes sense to give back strings so no extra processing takes place if it’s not needed(checking if every value is of a certain type). It’s up to the user to convert the strings into numbers or whatever they want, if they really have to.

Parsing variables

To use the function with the example above, I would just run

obj = url2json(";width=50px

Launching the console in the browser(CTRL+SHIFT+K), we get the results:


Parsing arrays

Arrays are parsed like this

obj = url2json("[100,45,88,90]&mixed=[red,56,blue,20]");

The object logged in the console looks like this:

   "numbers" : ["100", "45", "88", "90"]
   "mixed" : ["red", "56", "blue", "20"]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s