Steve Bennett Steve Bennett - 1 month ago 14
JSON Question

Embed JSON readably in a URL

We currently generate shareable URLs with URL-encoded embedded JSON. It looks delicious:

http://example.com/%2F%23start%3D%7B%22version%22%3A%220.0.04%22%2C%22initSources%22%3A%5B%22init%2Fnm.json%22%2C%7B%22catalog%22%3A%5B%7B%22name%22%3A%22Thing%201%22%2C%22items%22%3A%5B%7B%22name%22%3A%22Fnerp%22%2C%22items%22%3A%5B%7B%22name%22%3A%22Background%22%2C%22nowViewingIndex%22%3A0%2C%22isEnabled%22%3Atrue%2C%22isShown%22%3Atrue%2C%22isLegendVisible%22%3Atrue%2C%22opacity%22%3A0.6%7D%5D%7D%5D%7D%5D%2C%22catalogOnlyUpdatesExistingItems%22%3Atrue%7D%2C%7B%22initialCamera%22%3A%7B%22west%22%3A149.8687452406318%2C%22south%22%3A-27.849159445374482%2C%22east%22%3A154.32276951323334%2C%22north%22%3A-24.936526601352618%2C%22position%22%3A%7B%22x%22%3A-5351310.197047934%2C%22y%22%3A2833880.2585505643%2C%22z%22%3A-2987073.4882188127%7D%2C%22direction%22%3A%7B%22x%22%3A0.7925475007291486%2C%22y%22%3A-0.4197074423977381%2C%22z%22%3A0.44239588818605585%7D%2C%22up%22%3A%7B%22x%22%3A-0.3909589511624161%2C%22y%22%3A0.20703917597862256%2C%22z%22%3A0.8968198693807059%7D%7D%2C%22homeCamera%22%3A%7B%22west%22%3A105.00000000000001%2C%22south%22%3A-45%2C%22east%22%3A155%2C%22north%22%3A-5%7D%7D%5D%7D


Is there any kind of scheme (with Javascript library) to do this more readably? For instance, encoding:

{ "thing": { "a": [1,2], "b": 4.0 }, "foo": "bar" }


as

//(thing/(a*(1,2),b*4.0),foo*'bar')


Or something.

Answer

Ah, with more persistent googling, it looks like this is it: https://github.com/sage/jsurl

npm install jsurl

JSON: {"name":"John Doe","age":42,"children":["Mary","Bill"]}

JSURL: ~(name~'John*20Doe~age~42~children~(~'Mary~'Bill))

JSON + URL encoding: %7B%22name%22%3A%22John%20Doe%22%2C%22age%22%3A42%2C%22children%22%3A%5B%22Mary%22%2C%22Bill%

In my case, that's:

console.log(jsurl.stringify({"version":"0.0.04","initSources":["init/nm.json",{"catalog":[{"name":"Thing 1","items":[{"name":"Fnerp","items":[{"name":"Background","nowViewingIndex":0,"isEnabled":true,"isShown":true,"isLegendVisible":true,"opacity":0.6}]}]}],"catalogOnlyUpdatesExistingItems":true},{"initialCamera":{"west":149.8687452406318,"south":-27.849159445374482,"east":154.32276951323334,"north":-24.936526601352618,"position":{"x":-5351310.197047934,"y":2833880.2585505643,"z":-2987073.4882188127},"direction":{"x":0.7925475007291486,"y":-0.4197074423977381,"z":0.44239588818605585},"up":{"x":-0.3909589511624161,"y":0.20703917597862256,"z":0.8968198693807059}},"homeCamera":{"west":105.00000000000001,"south":-45,"east":155,"north":-5}}]}));

~(version~'0.0.04~initSources~(~'init*2fnm.json~(catalog~(~(name~'Thing*201~items~(~(name~'Fnerp~items~(~(name~'Background~nowViewingIndex~0~isEnabled~true~isShown~true~isLegendVisible~true~opacity~0.6))))))~catalogOnlyUpdatesExistingItems~true)~(initialCamera~(west~149.8687452406318~south~-27.849159445374482~east~154.32276951323334~north~-24.936526601352618~position~(x~-5351310.197047934~y~2833880.2585505643~z~-2987073.4882188127)~direction~(x~0.7925475007291486~y~-0.4197074423977381~z~0.44239588818605585)~up~(x~-0.3909589511624161~y~0.20703917597862256~z~0.8968198693807059))~homeCamera~(west~105.00000000000001~south~-45~east~155~north~-5))))
Comments