Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save lewisje/aad1e695c710429c20b468995f9138aa to your computer and use it in GitHub Desktop.
Save lewisje/aad1e695c710429c20b468995f9138aa to your computer and use it in GitHub Desktop.
Lodash in-browser JSON transformer (should work back to IE6)
(function (document) {
'use strict';
/*
* LODASH in-Browser JSON transformer
* Use this in a bookmarket (save its contents in a bookmark) and whenever you open a JSON response (e.g. https://www.reddit.com/.json)
* you can use it to test lodash methods against the data.
* Lodash is exposed on window as _ and "json" global variable contains the data within the browser window.
*
* Copy the line below and save it as the url of a new bookmark (it's the same code as below but minified for bookmark use):
* javascript:!function(e){"use%20strict";function%20t(){s=JSON.parse(j.innerText||j.textContent),y.src=p,y.onload=n,e.head.appendChild(y)}function%20n(){window.json=JSON.parse(JSON.stringify(s)),i(window.json),m.oninput=o,e.body.appendChild(m),e.body.appendChild(x)}function%20o(e){var%20t,n=e||event,o=n.target||n.srcElement;return%20o.value?(t=a(o.value),void(t&&"object"==typeof%20t?(r(o,"success"),i(t)):r(o,"error"))):(i(s),void%20r(o,"success"))}function%20i(e){j.innerText?j.innerText=JSON.stringify(e,null,2):j.textContent=JSON.stringify(e,null,2)}function%20a(e){var%20t=null;try{t=new%20Function("return%20"+e)()}catch(n){}return%20t}function%20r(e,t){e.style.backgroundColor="error"===t?g:b}var%20s,l,d,c,p="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.7.0/lodash.min.js",u="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js",h="Test%20lodash%20methods%20(available%20in%20this%20page%20as%20_%20global%20variable)%20against%20this%20data.%20The%20global%20variable%20json%20holds%20the%20JSON%20value%20loaded%20on%20this%20page.%20Empty%20the%20text%20field%20to%20return%20to%20the%20inital%20JSON%20value.",f="lodash%20code%20transformation%20goes%20here",g="#E37171",b="#A5E371",m=e.createElement("textarea"),x=e.createElement("div"),y=e.createElement("script"),j=e.querySelector("pre");m.setAttribute("type","text"),m.setAttribute("placeholder",f),x.innerHTML=h,l=x.style,l.position="fixed",l.top="0",l.right="0",l.width="200px",l.minHeight="70px",l.padding="2%25",l.background="#D6E38F",l.opacity="0.8",d=m.style,d.position="fixed",d.bottom="0",d.width="80%25",d.padding="20px",d.margin="5%25",d.fontSize="15px","object"!=typeof%20JSON?(c=e.createElement("script"),c.src=u,c.onload=t,e.head.appendChild(c)):t()}(document);
*/
var LODASH_SCRIPT_SRC = '//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.7.0/lodash.min.js';
var JSON_SRC = '//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js';
var INFO_TEXT = 'Test lodash methods (available in this page as _ global variable) against this data. The global variable json holds the JSON value loaded on this page. Empty the text field to return to the inital JSON value.';
var PLACEHOLDER_TEXT = 'lodash code transformation goes here';
var ERROR_COLOR = '#E37171';
var SUCCESS_COLOR = '#A5E371';
var input = document.createElement('textarea');
var info = document.createElement('div');
var script = document.createElement('script');
var pre = document.querySelector('pre');
var initialJSONCode, infs, inps, jscript; // to be set later
input.setAttribute('type', 'text');
input.setAttribute('placeholder', PLACEHOLDER_TEXT);
info.innerHTML = INFO_TEXT;
infs = info.style;
infs.position = 'fixed';
infs.top = '0';
infs.right = '0';
infs.width = '200px';
infs.minHeight = '70px';
infs.padding = '2%';
infs.background = '#D6E38F';
infs.opacity = '0.8';
inps = input.style;
inps.position = 'fixed';
inps.bottom = '0';
inps.width = '80%';
inps.padding = '20px';
inps.margin = '5%';
inps.fontSize = '15px';
if ('object' !== typeof JSON) {
jscript = document.createElement('script');
jscript.src = JSON_SRC;
jscript.onload = loadLodash;
document.head.appendChild(jscript);
} else {
loadLodash();
}
function loadLodash() {
initialJSONCode = JSON.parse(pre.innerText || pre.textContent);
script.src = LODASH_SCRIPT_SRC;
script.onload = onScriptLoaded;
document.head.appendChild(script);
}
function onScriptLoaded() {
window.json = JSON.parse(JSON.stringify(initialJSONCode)); //copy to the window
display(window.json);
input.oninput=onInput;
document.body.appendChild(input);
document.body.appendChild(info);
}
function onInput(e) {
var evt = e || event, target = evt.target || evt.srcElement, result;
if (!target.value) {
display(initialJSONCode);
setInputState(target, 'success');
return;
}
result = wrap(target.value);
if (result && 'object' === typeof result) {
setInputState(target, 'success');
display(result);
} else {
setInputState(target, 'error');
}
}
function display(result) {
if (pre.innerText) {
pre.innerText = JSON.stringify(result, null, 2);
} else {
pre.textContent = JSON.stringify(result, null, 2);
}
}
function wrap(code) {
var result = null;
try {
result = new Function('return ' + code)();
} catch (e) {}
return result;
}
function setInputState(input, state) {
input.style.backgroundColor = state === 'error' ? ERROR_COLOR : SUCCESS_COLOR;
}
})(document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment