Escaping slashes in json

[JonathanUsername]

I am trying to include JSON in a state's url, but having trouble dealing with slashes and other special characters appearing in the JSON.

Here's an example of JSON:
[{"c": "Na+/K+ transporting, alpha 1 polypeptide, "id": 1}]

I noticed that there were a number of issues already regarding escaping special chars like slashes ( e.g. issue #1645 ) but nothing that dealt explicitly with parameters when they are already encoded as json, like {param:json}.

I thought to approach the issue by looking up how the JSON is encoded by the ui-router, then adding a encode and decode step like the following:

 $urlMatcherFactoryProvider.type('escapedJson', {
    encode: function (item) {
      return encodeURIComponent(angular.toJson(item));
    },
    decode: function (item) {
      return angular.fromJson(decodeURIComponent(item));
    },
    is: function (item) {
      // Ensure the item is valid
      return angular.isObject(item);
    },
    equals: angular.equals,
    pattern: /[^/]*/
  });

This fixes the issue, though it's still unclear where the problem has come from. I would have thought the encoding/decoding happens purely in the url formatting step, but I'm not sure. Stepping through the code it seems to succeed and then immediately trigger a transition back with empty toParams, even though the $stateParams is still correct.

I'm aware this could definitely be an issue with the application, rather than the router, but I thought it was suspicious that adding this small change fixed it.

Anyway, I thought I would share this solution for anyone else, and I wanted to ask, is this the right approach for a workaround? Has anyone else noticed this behaviour?

[eddiemonge]

do you really need json in the url? cant you use them as query string parameters?

[JonathanUsername]

Err, we could but we're effectively just using this to convert complex JSON objects into a "static URL" in the simplest way possible. We would need to define every possible parameter as a new query string parameter in the stateProvider.state.url, whereas with JSON it doesn't need to be predefined in such a way, and it handles arrays nicely:

e.g. [{ name: foo, value: 5 }, { name: bar, value: 7}]
instead of:
url: /?names=foo,bar&values=5,7
...or some similar way, and then parsing them. Instead we can simply decode the JSON and we instantly have the object we need to pass as params to the API service.

The escaping method I put above has fixed our issue, however, so I guess there's no pressing need to submit a fix as the workaround for us was fairly straightforward.

[eddiemonge]

Ok I am going to close this then. Could be a feature in the future though