How to split a URL string with parameters into an array using JavaScript

Question

I'm trying to break up a string like this one:

fname=bill&mname=&lname=jones&addr1=This%20House&...

I want to end up with an array indexed like this

myarray[0][0] = fname
myarray[0][1] = bill
myarray[1][0] = mname
myarray[1][1] = 
myarray[2][0] = lname
myarray[2][1] = jones
myarray[3][0] = addr
myarray[3][1] = This House

The url is quite a bit longer than the example. This is what I've tried:

var
    fArray = [],
    nv = [],
    myarray = [];

fArray = fields.split('&');

// split it into fArray[i]['name']="value"
for (i=0; i < fArray.length; i++) {
    nv = fArray[i].split('=');
    myarray.push(nv[0],nv[1]);
    nv.length = 0;
}

The final product is intended to be in 'myarray' and it is, except that I'm getting a one dimensional array instead of a 2 dimensional one.

The next process is intended to search for (for example) 'lname' and returning the index of it, so that if it returned '3' I can then access the actual last name with myarray[3][1].

Does this make sense or am I over complicating things?

nikc.org · Accepted Answer · 2012-12-04 18:15:48Z

1

Your line myarray.push(nv[0],nv[1]); pushes two elements to the array myarray, not a single cell with two elements as you expect (ref: array.push). What you want is myarray.push( [nv[0],nv[1]] ) (note the brackets), or myarray.push(nv.slice(0, 2)) (ref: array.slice).

To simplify your code, may I suggest using Array.map:

var q = "foo=bar&baz=quux&lorem=ipsum"; 
         // PS. If you're parsing from a-tag nodes, they have a property 
         // node.search which contains the query string, but note that 
         // it has a leading ? so you want node.search.substr(1)

var vars = q.split("&").map(function (kv) {
               return kv.split("=", 2);
           });

For searching, I would suggest using array.filter:

var srchkey = "foo";
var matches = vars.filter(function (v) { return v[0] === srchkey; });

NB. array.filter will always return an array. If you always want just a single value, you could use array.some or a bespoke searching algorithm.

edited Dec 4, 2012 at 18:15

answered Dec 4, 2012 at 14:54

nikc.org

17k7 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nikc.org Over a year ago

@PeterSnow, amended my answer with the searching part, which I managed to miss on the first round.

Peter White Over a year ago

thanks nikc.org, I made a function to do that, but your's is better! However, I was hoping to extract the index of the fields I require to variables, so that I can refer to an element with 'out[lname][1]' instead of 'out[2][1]'. That was to make it tolerant of changes in the url string. Unfortunately though I can't find a way to assign the key of 'lname' (etc) to a variable, so it looks like it's back to the drawing board. Thanks though, I learnt about a few new javascript functions!

nikc.org Over a year ago

@PeterSnow The array.filter method does receive the index as a param as well, I just chose not to use it in the example. As stated in the docs (which I link to in my answer): "callback is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed.". If you return the value for index in the filter/some callback, that's what you'll have.

Cerbrus · Accepted Answer · 2012-12-04 14:58:33Z

1

for (var i = 0; i < fArray.length; i++) {
    nv = fArray[i].split('=');
    myarray.push([nv[0],nv[1]]);
}

nv.length = 0; is not required, since you're setting nv in each iteration of the for loop.

Also, use var i in the for-loop, otherwise, you're using / assigning a global variable i, that's asking for interference.

answered Dec 4, 2012 at 14:58

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

3 Comments

Peter White Over a year ago

Cerbrus Over a year ago

As far as I know, indexOf doesn't work on multidimensional arrays.

Peter White Over a year ago

Thankyou @Cerbrus. That's a shame! By the way, sorry I accidentally accepted your answer when I intended to accept the one below instead! I updated that, because I used his suggested array.map() solution, but I upvoted your reply also for because of your assistance.

Collectives™ on Stack Overflow

How to split a URL string with parameters into an array using JavaScript

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related