Javascript URL to Object

• Tweet

• Tweet

Hi Guys,

So I had this weird request from my colleague to transform url we are browsing for our website to Object.

So say for example you have a url like this one

http://tests/urltoobject.html?h=t&p=k#45

And you want every piece of information in that url available as object.

Now Javascript comes with various objects that are worth exploring, One of them is called location Object with have some really handy properties

Location Object Properties are given below

Now that said we can easily extend the above object of just create a function that will do a little bit more, say for example If I want details for location for the url I mentioned above I get this output

Now let me introduce a function that I wrote as is given below

function urlToObject() {
      var obj = {
        hash: window.location.hash,
        hostname: window.location.hostname,
        href: window.location.href,
        host: window.location.host,
        origin: window.location.origin,
        querystring: window.location.search.substr(1),
        search: window.location.search,
        port: window.location.port,
        protocol: window.location.protocol,
        pathname: window.location.pathname,
        scriptname:  window.location.pathname.substr(1),
        queryvars_array : null,
        queryvars_assoc_obj : null,
      };
 
      var params = {}, key;
      var params_arr = [];
      var keyvals = window.location.search.substr(window.location.search.indexOf('?') + 1).split('&');
 
      for(var i = 0; i < keyvals.length; i++)
      {
          key = keyvals[i].split('=');
          params_arr.push(key[1]);
          params['"'+key[0]+'"'] = key[1];
      }
      obj.queryvars_assoc_obj = params;
      obj.queryvars_array = params_arr;
      return obj;
    }
 
    console.log(urlToObject());

It is sort of extending the Location object and adding few more properties like queryvars_array or queryvars_assoc_obj so that you can access query string key=val as obj.key

output of the above code is shown below. You can reduce the above code a bit. I have done property by property map so that you know what’s happening. I’ll show you how to extend location object using jQuery in a sec.

Advertisement

Al right now as you can see what really has happened above. Now lets explore jQuery Alternative, the best part of the method below is that we are extending the actual location object thus functions under location object will be available from the new object

var locObj = function(){
    var loc = window.location;
    loc = jQuery.extend({
                          queryvars_array : null,
                          queryvars_assoc_obj : null,
                          scriptname:  window.location.pathname.substr(1),
                          querystring: window.location.search.substr(1)
                        },loc);
    var params = {}, key;
    var params_arr = [];
    var keyvals = window.location.search.substr(window.location.search.indexOf('?') + 1).split('&');      
    for(var i = 0; i < keyvals.length; i++) {
          key = keyvals[i].split('=');
          params_arr.push(key[1]);
          params['"'+key[0]+'"'] = key[1];
    }
    loc.queryvars_assoc_obj = params;
    loc.queryvars_array = params_arr;
    return loc;
}
    console.log(locObj());

The above method will return pretty much what you saw in the above screenshot of my javascript console in chrome browser

I hope this helps

Cheers

Advertisement