javascript object to string

Question

I'm trying to serialize a javascript object but with a particular form(I think it has to be a method). Example:

var media = new Object();
media.url = "localhost";
media.foo = "asd"

var data=new Object();
data.title = "myTitle";
data.description = "myDescription";
data.media.push(media);

I need to serialize data this way:

"title=myTitle&description=myDescription&media[0].url=localhost&media[0].foo=asd"

The important thing is the way the array is written.

Is this being used with a jQuery AJAX function? If you give it an object as the `data:` option, it will serialize for you. — Barmar, Jun 27 '13 at 19:16
Don't use `new Object`. Declare it using `{}`. `var data = {title: "mytitle", media: [ {url: "localhost"} ]};`. — gen_Eric, Jun 27 '13 at 19:19
`media[0].url` isn't the right format. It'd really be `media[0][url]` when serialized. If you use jQuery, there is `$.param`. — gen_Eric, Jun 27 '13 at 19:20
@Barmar yes, the data will be used in post. And yes, I'm giving it to the data — Federico Lenzi, Jun 27 '13 at 19:20
@Federico: In that case, you don't need to serialize it, just do `$.ajax({url: 'example.com', data: data});`. — gen_Eric, Jun 27 '13 at 19:20
@RocketHazmat: Why do you claim that to be "*not the right format*"? It's the format the OP requested, and if `$.param` doesn't conform with that you cannot use it… — Bergi, Jun 27 '13 at 19:35
$.param combined with decodeURIComponent() works like a charm. http://stackoverflow.com/a/17351537/788509 — bluetoft, Jun 27 '13 at 19:36
@Bergi: I assumed he was sending that data via GET or POST and that was a query string. So, I assumed he typed the format incorrectly. — gen_Eric, Jun 27 '13 at 19:37

score 1 · Answer 1 · edited May 23 '17 at 12:21

Check out Convert a JSON object's keys into dot notation paths and Convert complex JavaScript object to dot notation object. You can easily adapt those to handle your array keys special:

function transform(obj) {
    var result = {};
    recurse(obj, "");
    return result;
    function recurse(o, name) {
        if (Object(o) !== o)
            result[name] = o;
        else if (Array.isArray(o))
            for (var i=0; i<o.length; i++)
                recurse(o[i], name+"["+i+"]");
        else // if plain object?
            for (var p in o)
                recurse(o[p], name?name+"."+p:p);
    }
}

You can then apply $.param on the result to get the URL encoding etc:

$.param(transform(data))

(or just pass it into the data parameter of $.ajax).

score 0 · Accepted Answer · edited May 23 '17 at 12:21

0

There are multiple ways to serialize an object into a list (string) of parameters, have a look:

How to serialize an Object into a list of parameters?

One example is a method such as the below:

var str = "";
for (var key in obj) {
   if (str != "") {
       str += "&";
   }
   str += key + "=" + obj[key];
}

You can modify it to suit the style you need.

edited May 23 '17 at 12:21

Community

1
1

answered Jun 27 '13 at 19:19

Bassem

3,135
2
25
41

2

In addition to handling recursive objects, you need to call `encodeURIComponent()`. – Barmar Jun 27 '13 at 19:28
Thanks, I made something like your response – Federico Lenzi Jun 27 '13 at 19:41

Asken · Answer 3 · 2013-06-27T19:38:45.887

0

Sorry, but I need to change. Thought it was easier but when looking at the result I saw that it was not so straight forward. If you're using jquery though you can simply do it like this:

var media = new Object();
media.url = "localhost";
media.foo = "asd"

var data=new Object();
data.title = "myTitle";
data.description = "myDescription";
data.media = []; // you forgot this...
data.media.push(media);

var data = $.param(data));

edited Jun 27 '13 at 19:38

answered Jun 27 '13 at 19:20

Asken

7,679
10
45
77

Wasn't asked for as far as I can see. – Asken Jun 27 '13 at 19:23
something like this, but with support for arrays – Federico Lenzi Jun 27 '13 at 19:23

bluetoft · Answer 4 · 2013-06-27T19:31:51.400

you can use jQuery.param to do this:

$.param({a:'2', b: 1.2, c: "hello world"})// -> a=2&b=1.2&c=hello+world

EDIT

What I was missing above is the array support sorry bout that.

For this you'll need to decodeURIComponent()

var media = new Object();
media.url = "localhost";
media.foo = "asd"

var data=new Object();
data.title = "myTitle";
data.description = "myDescription";
data.media = [];
data.media.push(media);
alert(decodeURIComponent($.param(data)));

Output:

title=myTitle&description=myDescription&media[0][url]=localhost&media[0][foo]=asd

http://jsfiddle.net/bLu8Q/

score 0 · Answer 5 · answered Jun 27 '13 at 19:25

jQuery provides this via jQuery.param

var params = $.param(data);
console.log(params);

Produces:

title=myTitle&description=myDescription&media%5B0%5D%5Burl%5D=localhost&media%5B0%5D%5Bfoo%5D=asd

As you can see, it handles the nested array and object as you wish (%5B and %5D are URL encodings for [ and ]).

If you're using $.ajax() or one of its shortcuts, you don't need to call this explicitly. If you supply the object as the data argument or option, jQuery will automatically serialize it using this method.

javascript object to string

5 Answers5