CODEWITHSUNDEEP
javascriptjqueryjsonurlescaping
Matthieu Napoli
Matthieu Napoli

Reputation: 49713

How to escape a JSON string to have it in a URL?

Using Javascript, I want to generate a link to a page. The parameters to the page are in a Javascript array that I serialize in JSON.

So I would like to generate a URL like that :

http://example.com/?data="MY_JSON_ARRAY_HERE"

How do I need to escape my JSON string (array serialized) to include it as a parameter in a URL ?

If there's a solution using JQuery I'd love it.

Note: Yes, the parameters to the page need to be in an array because there are a lot of them. I think I'll use bit.ly to shorten the links afterwards.

Upvotes: 152

Views: 241360

Answers (6)

Chris Johnson
Chris Johnson

Reputation: 22036

I'll offer an alternative. Sometimes it's easier to use a completely different encoding, especially if you're dealing with a variety of systems that don't all handle the details of URL encoding the same way.

Rather than URL-encoding the data, you can base64-encode it. The benefit of this is the encoded data is very generic, consisting only of alpha characters and sometimes trailing ='s. Example:

JSON array-of-strings:

["option", "Fred's dog", "Bill & Trudy", "param=3"]

That data, URL-encoded as the data param:

"data=%5B%27option%27%2C+%22Fred%27s+dog%22%2C+%27Bill+%26+Trudy%27%2C+%27param%3D3%27%5D"

Same, base64-encoded:

"data=WyJvcHRpb24iLCAiRnJlZCdzIGRvZyIsICJCaWxsICYgVHJ1ZHkiLCAicGFyYW09MyJd"

The base64 approach can be a bit shorter, but more importantly it's simpler. I often have problems moving URL-encoded data between cURL, web browsers and other clients, usually due to quotes, embedded % signs, shell expansion of wildcards, and so on. Base64 is very neutral and very portable because there are no special characters in its output.

Many systems use this approach. For example in the Kubernetes ecosystem, kubectl edit secret represents all secrets in base64 to avoid encoding issues and to make non-printable binary data easily copy-and-pastable.

Upvotes: 13

jcj80
jcj80

Reputation: 521

I was looking to do the same thing. problem for me was my url was getting way too long. I found a solution today using Bruno Jouhier's jsUrl.js library.

I haven't tested it very thoroughly yet. However, here is an example showing character lengths of the string output after encoding the same large object using 3 different methods:

  • 2651 characters using jQuery.param
  • 1691 characters using JSON.stringify + encodeURIComponent
  • 821 characters using JSURL.stringify

clearly JSURL has the most optimized format for urlEncoding a js object.

the thread at https://groups.google.com/forum/?fromgroups=#!topic/nodejs/ivdZuGCF86Q shows benchmarks for encoding and parsing.

Note: After testing, it looks like jsurl.js library uses ECMAScript 5 functions such as Object.keys, Array.map, and Array.filter. Therefore, it will only work on modern browsers (no ie 8 and under). However, are polyfills for these functions that would make it compatible with more browsers.

Upvotes: 26

genesis
genesis

Reputation: 50982

Using encodeURIComponent():

var url = 'index.php?data='+encodeURIComponent(JSON.stringify({"json":[{"j":"son"}]})),

Upvotes: 11

foxybagga
foxybagga

Reputation: 4214

Answer given by Delan is perfect. Just adding to it - incase someone wants to name the parameters or pass multiple JSON strings separately - the below code could help!

JQuery

var valuesToPass = new Array(encodeURIComponent(VALUE_1), encodeURIComponent(VALUE_2), encodeURIComponent(VALUE_3), encodeURIComponent(VALUE_4));

data = {elements:JSON.stringify(valuesToPass)}

PHP

json_decode(urldecode($_POST('elements')));

Hope this helps!

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1039588

You could use the encodeURIComponent to safely URL encode parts of a query string:

var array = JSON.stringify([ 'foo', 'bar' ]);
var url = 'http://example.com/?data=' + encodeURIComponent(array);

or if you are sending this as an AJAX request:

var array = JSON.stringify([ 'foo', 'bar' ]);
$.ajax({
    url: 'http://example.com/',
    type: 'GET',
    data: { data: array },
    success: function(result) {
        // process the results
    }
});

Upvotes: 20

Delan Azabani
Delan Azabani

Reputation: 81502

encodeURIComponent(JSON.stringify(object_to_be_serialised))

Upvotes: 251

Related Questions