Created
April 13, 2017 09:37
-
-
Save pietro909/44911ccc27a985794c8dfe4f83058257 to your computer and use it in GitHub Desktop.
JS Bin Convert JSON to valid Elm data structure (record) // source http://jsbin.com/duneqo
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Convert JSON to valid Elm data structure (record)"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script> | |
| <article> | |
| <h1>JSON to Elm model</h1> | |
| <section> | |
| <div> | |
| <h3>Input</h3> | |
| <textarea cols="32" rows="10" id="input"></textarea> | |
| </div> | |
| <div> | |
| <h3>Output</h3> | |
| <textarea cols="32" rows="10" id="output"></textarea> | |
| </div> | |
| </section> | |
| <button id="parse">Parse JSON</button> | |
| </article> | |
| <script id="jsbin-javascript"> | |
| "use strict"; | |
| function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } } | |
| var _ref = _; | |
| var isUndefined = _ref.isUndefined; | |
| var isNull = _ref.isNull; | |
| var isFunction = _ref.isFunction; | |
| var isNaN = _ref.isNaN; | |
| var isDate = _ref.isDate; | |
| var isObject = _ref.isObject; | |
| var isString = _ref.isString; | |
| var isNumber = _ref.isNumber; | |
| var isBoolean = _ref.isBoolean; | |
| var format = function format(arrOfStr) { | |
| return "{" + arrOfStr.join(",") + "}"; | |
| }; | |
| var skip = function skip(val) { | |
| return isUndefined(val) || isNull(val) || isFunction(val) || isNaN(val) || isDate(val); | |
| }; | |
| var parse = function parse(node) { | |
| return Object.keys(node).reduce(function (acc, key) { | |
| var val = node[key]; | |
| var result = undefined; | |
| if (skip(val)) { | |
| return acc; | |
| } | |
| if (isObject(val)) { | |
| return [].concat(_toConsumableArray(acc), [format(parse(val))]); | |
| } | |
| if (isString(val)) { | |
| result = key + " = \"" + val + "\""; | |
| } else if (isNumber(val) || isBoolean(val)) { | |
| result = key + " = " + val; | |
| } else { | |
| result = key + " = \"" + val.toString() + "\""; | |
| } | |
| return [].concat(_toConsumableArray(acc), [result]); | |
| }, []); | |
| }; | |
| var output = document.getElementById('output'); | |
| var input = document.getElementById('input'); | |
| function doIt() { | |
| var json = undefined; | |
| try { | |
| json = JSON.parse(input.value); | |
| } catch (e) { | |
| alert(e); | |
| } | |
| var result = format(parse(json)); | |
| console.log(result); | |
| output.value = result; | |
| } | |
| var button = document.getElementById('parse'); | |
| button.onclick = doIt; | |
| function demo() { | |
| input.value = JSON.stringify({ | |
| "match": { | |
| "path": "/", | |
| "url": "/", | |
| "isExact": true, | |
| "params": {} | |
| }, | |
| "location": { | |
| "pathname": "/", | |
| "search": "", | |
| "hash": "" | |
| }, | |
| "history": { | |
| "length": 3, | |
| "action": "POP", | |
| "location": { | |
| "pathname": "/", | |
| "search": "", | |
| "hash": "" | |
| } | |
| } | |
| }); | |
| doIt(); | |
| } | |
| demo(); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">const { | |
| isUndefined, | |
| isNull, | |
| isFunction, | |
| isNaN, | |
| isDate, | |
| isObject, | |
| isString, | |
| isNumber, | |
| isBoolean, | |
| } = _ | |
| const format = arrOfStr => "{"+arrOfStr.join(",")+"}" | |
| const skip = | |
| val => | |
| isUndefined(val) || isNull(val) || | |
| isFunction(val) || isNaN(val) || isDate(val) | |
| const parse = (node) => | |
| Object.keys(node).reduce((acc, key) => { | |
| const val = node[key] | |
| let result | |
| if (skip(val)) { | |
| return acc | |
| } | |
| if (isObject(val)) { | |
| return [...acc, format(parse(val))] | |
| } | |
| if (isString(val)) { | |
| result = `${key} = "${val}"` | |
| } else if (isNumber(val) || isBoolean(val)) { | |
| result = `${key} = ${val}` | |
| } else { | |
| result = `${key} = "${val.toString()}"` | |
| } | |
| return [...acc, result] | |
| }, []) | |
| const output = document.getElementById('output') | |
| const input = document.getElementById('input') | |
| function doIt() { | |
| let json | |
| try { | |
| json = JSON.parse(input.value) | |
| } catch(e) { | |
| alert(e) | |
| } | |
| const result = format(parse(json)) | |
| console.log(result) | |
| output.value = result | |
| } | |
| const button = document.getElementById('parse') | |
| button.onclick = doIt | |
| function demo() { | |
| input.value = JSON.stringify({ | |
| "match":{ | |
| "path":"/", | |
| "url":"/", | |
| "isExact":true, | |
| "params":{ | |
| } | |
| }, | |
| "location":{ | |
| "pathname":"/", | |
| "search":"", | |
| "hash":"" | |
| }, | |
| "history":{ | |
| "length":3, | |
| "action":"POP", | |
| "location":{ | |
| "pathname":"/", | |
| "search":"", | |
| "hash":"" | |
| } | |
| } | |
| }) | |
| doIt() | |
| } | |
| demo() | |
| </script></body> | |
| </html> |
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
| "use strict"; | |
| function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } } | |
| var _ref = _; | |
| var isUndefined = _ref.isUndefined; | |
| var isNull = _ref.isNull; | |
| var isFunction = _ref.isFunction; | |
| var isNaN = _ref.isNaN; | |
| var isDate = _ref.isDate; | |
| var isObject = _ref.isObject; | |
| var isString = _ref.isString; | |
| var isNumber = _ref.isNumber; | |
| var isBoolean = _ref.isBoolean; | |
| var format = function format(arrOfStr) { | |
| return "{" + arrOfStr.join(",") + "}"; | |
| }; | |
| var skip = function skip(val) { | |
| return isUndefined(val) || isNull(val) || isFunction(val) || isNaN(val) || isDate(val); | |
| }; | |
| var parse = function parse(node) { | |
| return Object.keys(node).reduce(function (acc, key) { | |
| var val = node[key]; | |
| var result = undefined; | |
| if (skip(val)) { | |
| return acc; | |
| } | |
| if (isObject(val)) { | |
| return [].concat(_toConsumableArray(acc), [format(parse(val))]); | |
| } | |
| if (isString(val)) { | |
| result = key + " = \"" + val + "\""; | |
| } else if (isNumber(val) || isBoolean(val)) { | |
| result = key + " = " + val; | |
| } else { | |
| result = key + " = \"" + val.toString() + "\""; | |
| } | |
| return [].concat(_toConsumableArray(acc), [result]); | |
| }, []); | |
| }; | |
| var output = document.getElementById('output'); | |
| var input = document.getElementById('input'); | |
| function doIt() { | |
| var json = undefined; | |
| try { | |
| json = JSON.parse(input.value); | |
| } catch (e) { | |
| alert(e); | |
| } | |
| var result = format(parse(json)); | |
| console.log(result); | |
| output.value = result; | |
| } | |
| var button = document.getElementById('parse'); | |
| button.onclick = doIt; | |
| function demo() { | |
| input.value = JSON.stringify({ | |
| "match": { | |
| "path": "/", | |
| "url": "/", | |
| "isExact": true, | |
| "params": {} | |
| }, | |
| "location": { | |
| "pathname": "/", | |
| "search": "", | |
| "hash": "" | |
| }, | |
| "history": { | |
| "length": 3, | |
| "action": "POP", | |
| "location": { | |
| "pathname": "/", | |
| "search": "", | |
| "hash": "" | |
| } | |
| } | |
| }); | |
| doIt(); | |
| } | |
| demo(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment