Forked from monostere0/lodash_browser_json_transformer.js
Last active
April 3, 2016 09:43
-
-
Save lewisje/aad1e695c710429c20b468995f9138aa to your computer and use it in GitHub Desktop.
Lodash in-browser JSON transformer (should work back to IE6)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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