CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
DanielG
DanielG

Reputation: 226

jQuery read params from hash in URL and store in object

Is there an extension of jquery to obtain from a set of params:

categories[]=Shop+Mac&categories[]=Software&price_max=2799&price_min=24&sort=&page=1

a JSON object like:

{
   'categories':   ["Shop Mac", "Software"],
   'price_max':    "2799",
   'price_min':    "24",
   'page':         '1'
}

...?

Upvotes: 2

Views: 776

Answers (2)

Andy E
Andy E

Reputation: 344685

I wrote a function in this answer to a similar question that should help you. I voted to close this as a duplicate of that question, but now I see that there are extra requirements in this one. When I wrote that answer, I made a version that will handle array-style URL parameters too:

(function () {
    var e,
        d = function (s) { return decodeURIComponent(s).replace(/\+/g, " "); },
        q = window.location.search.substring(1),
        r = /([^&=]+)=?([^&]*)/g;

    while (e = r.exec(q)) {
        if (e[1].indexOf("[") == "-1")
            urlParams[d(e[1])] = d(e[2]);
        else {
            var b1 = e[1].indexOf("["),
                aN = e[1].slice(b1+1, e[1].indexOf("]", b1)),
                pN = d(e[1].slice(0, b1));

            if (typeof urlParams[pN] != "object")
                urlParams[d(pN)] = {},
                urlParams[d(pN)].length = 0;

            if (aN)
                urlParams[d(pN)][d(aN)] = d(e[2]);
            else
                Array.prototype.push.call(urlParams[d(pN)], d(e[2]));

        }
    }
})();

You can see a working demo here: http://jsbin.com/adali3/2

Sample query string:

test=Hello&person[]=jeff&person[]=jim&person[extra]=john&nocache=1290122355841

Result:

{
    "test": "Hello",
    "person": {
        "0": "jeff",
        "1": "jim",
        "length": 2,
        "extra": "john"
    },
    "nocache": "1290100673882"
}

Upvotes: 2

OrganicPanda
OrganicPanda

Reputation: 2687

I have a simple solution:

// Get args from somewhere
var args = 'categories[]=Shop+Mac&categories[]=Software&price_max=2799&price_min=24&sort=&page=1';

// Set up final object
var output = {}

// Split on & to get groups of key-value pairs
args = args.split('&');

for (i = 0; i < args.length; i++) {

    // Split on = to get separate key from value 
    args[i] = args[i].split('=');

    // Remove square brackets from the key if they exist
    if (/\[\]$/.test(args[i][0])) {
        key = args[i][0].substring(0,(args[i][0].length) - 2);
    } else {
        key = args[i][0]
    }

    // If we haven't visited this key before then set it to a empty array
    if (output[key] === undefined) {
        output[key] = [];
    }

    // Push the value in to the array and remove + symbols whilst we're at it
    output[key].push(args[i][1].replace('+', ' '));

}

If you're using Firefox you can:

// You can now use output
console.debug(output);

And you'll get:

categories: ["Shop Mac", "Software"]
page: ["1"] 
price_max: ["2799"]
price_min: ["24"]
sort: [""]

Upvotes: 1

Related Questions