Home » Javascript » How to escape a JSON string to have it in a URL?

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

Posted by: admin November 30, 2017 Leave a comment

Questions:

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.

Answers:
encodeURIComponent(JSON.stringify(object_to_be_serialised))

Questions:
Answers:

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
    }
});

Questions:
Answers:

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.

Questions:
Answers:

Using encodeURIComponent():

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

Questions:
Answers:

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!