Issues converting JS object to query string

Question

I need to convert and JS object to query string and this object can wrap nested objects, like this:

 var item = {
        field1: 100,
        field2: 200,
        field3: [ 1,2,3 ],
        field4: {
            field5: 300,
            field6: 'Quad',
            field7: [ 4,5,6]
        }
    };

To convert this object I'm using this function

var serialize2 = function(obj, prefix) {
        var str = [], p;
        for (p in obj) {
            if (obj.hasOwnProperty(p)) {
                var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
                str.push((v !== null && typeof v === "object") ?
                    serialize2(v, k) :
                encodeURIComponent(k) + "=" + encodeURIComponent(v));
            }
        }
        return str.join("&");
    };

And once converted my query string looks like this

field4[field5]=300&field4[field6]=Quad

instead of

field4.field5=300&field4.field6=Quad

And then my Java Spring Application can't bind this children object

How can I solve this issue?

samanime · Accepted Answer · 2016-10-26 19:27:33Z

1

Just change your convert function:

var serialize2 = function(obj, prefix) {
    var str = [], p;
    for (p in obj) {
        if (obj.hasOwnProperty(p)) {
            var k;
            if (Array.isArray(obj)) {
                k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
            } else {
                k = prefix ? prefix + "." + p : p, v = obj[p];
            }
            str.push((v !== null && typeof v === "object") ?
                serialize2(v, k) :
            encodeURIComponent(k) + "=" + encodeURIComponent(v));
        }
    }
    return str.join("&");
};

edited Oct 26, 2016 at 19:27

answered Oct 26, 2016 at 19:11

samanime

26.8k17 gold badges99 silver badges155 bronze badges

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

2 Comments

Matheus Hernandes Over a year ago

It fixes my issue with nested objects but broke my array: "field1=100 &field2=200 &field3.0=1 &field3.1=2 &field3.2=3 &field4.field5=300 &field4.field6=Quad &field4.field7.0=4 &field4.field7.1=5 &field4.field7.2=6"

samanime Over a year ago

Ah, I didn't notice you used arrays as well. Changed my answer so it should work with how you're doing things.

Gayan Prasanna · Accepted Answer · 2017-03-09 09:35:48Z

1

  function generateQueryParam(parameterMap) {
        var queryString = '';
        var _keys = Object.keys(parameterMap);

        _keys.forEach(mapResolver);

        function mapResolver(k, i) {
            var value = parameterMap[k];
            if (i < _keys.length-1) {
                queryString += k + '=' + value + '&';
            } else {
                queryString += k + '=' + value;
            }
        }
        return queryString;
    }

edited Mar 9, 2017 at 9:35

answered Mar 9, 2017 at 8:44

Gayan Prasanna

951 silver badge11 bronze badges

3 Comments

Gayan Prasanna Over a year ago

FYI : this only do convert plain js object to query string.If you need to resolve for nested objects go with some recursive strategy

thomaux Over a year ago

Could you explain what your code is supposed to do?

Gayan Prasanna Over a year ago

this screenshot will explain .It will convert js object to a Query string @Anzeo

Collectives™ on Stack Overflow

Issues converting JS object to query string

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related