/* eslint-disable no-extend-native */ // https://github.com/afshinm/Json-to-HTML-Table/blob/master/json-to-table.js /** * JavaScript format string function * */ String.prototype.format = function () { var args = arguments return this.replace(/{(\d+)}/g, function (match, number) { return typeof args[number] !== 'undefined' ? args[number] : '{' + number + '}' }) } /** * Return just the keys from the input array, optionally only for the specified search_value * version: 1109.2015 * discuss at: http://phpjs.org/functions/arrayKeys * + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) * + input by: Brett Zamir (http://brett-zamir.me) * + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) * + improved by: jd * + improved by: Brett Zamir (http://brett-zamir.me) * + input by: P * + bugfixed by: Brett Zamir (http://brett-zamir.me) * * example 1: arrayKeys( {firstname: 'Kevin', surname: 'van Zonneveld'} ); * * returns 1: {0: 'firstname', 1: 'surname'} */ const arrayKeys = (input, searchValue, argStrict) => { var search = typeof searchValue !== 'undefined' var tmpArr = [] var strict = !!argStrict var include = true var key = '' if (input && typeof input === 'object' && input.change_key_case) { // Duck-type check for our own array()-created PHPJS_Array return input.keys(searchValue, argStrict) } for (key in input) { if (input.hasOwnProperty(key)) { include = true if (search) { if (strict && input[key] !== searchValue) { include = false } else if (input[key] !== searchValue) { include = false } } if (include) { tmpArr[tmpArr.length] = key } } } return tmpArr } /** * Convert a Javascript Oject array or String array to an HTML table * JSON parsing has to be made before function call * It allows use of other JSON parsing methods like jQuery.parseJSON * http(s)://, ftp://, file:// and javascript:; links are automatically computed * * JSON data samples that should be parsed and then can be converted to an HTML table * var objectArray = '[{"Total":"34","Version":"1.0.4","Office":"New York"},{"Total":"67","Version":"1.1.0","Office":"Paris"}]'; * var stringArray = '["New York","Berlin","Paris","Marrakech","Moscow"]'; * var nestedTable = '[{ key1: "val1", key2: "val2", key3: { tableId: "tblIdNested1", tableClassName: "clsNested", linkText: "Download", data: [{ subkey1: "subval1", subkey2: "subval2", subkey3: "subval3" }] } }]'; * * Code sample to create a HTML table Javascript String * var jsonHtmlTable = ConvertJsonToTable(eval(dataString), 'jsonTable', null, 'Download'); * * Code sample explaned * - eval is used to parse a JSON dataString * - table HTML id attribute will be 'jsonTable' * - table HTML class attribute will not be added * - 'Download' text will be displayed instead of the link itself * * @author Afshin Mehrabani * * @class ConvertJsonToTable * * @method ConvertJsonToTable * * @param parsedJson object Parsed JSON data * @param tableId string Optional table id * @param tableClassName string Optional table css class name * @param linkText string Optional text replacement for link pattern * * @return string Converted JSON to HTML table */ const convertJsonToTable = (parsedJson, tableId, tableClassName, linkText) => { // Patterns for links and NULL value let italic = '{0}' let link = linkText ? '' + linkText + '' : '{0}' let log = '{0}' // Pattern for table let idMarkup = tableId ? ' id="' + tableId + '"' : '' let classMarkup = tableClassName ? ' class="' + tableClassName + '"' : '' let tbl = '{0}{1}
' // Patterns for table content let th = '{0}' let tb = '{0}' let tr = '{0}' let thRow = '{0}' let tdRow = '{0}' let thCon = '' let tbCon = '' let trCon = '' if (parsedJson) { let isStringArray = typeof (parsedJson[0]) === 'string' let headers // Create table headers from JSON data // If JSON data is a simple string array we create a single table header if (isStringArray) { thCon += thRow.format('value') } else { // If JSON data is an object array, headers are automatically computed if (typeof (parsedJson[0]) === 'object') { headers = arrayKeys(parsedJson[0]) for (let i = 0; i < headers.length; i++) { thCon += thRow.format(headers[i]) } } } th = th.format(tr.format(thCon)) // Create table rows from Json data if (isStringArray) { for (let i = 0; i < parsedJson.length; i++) { tbCon += tdRow.format(parsedJson[i]) trCon += tr.format(tbCon) tbCon = '' } } else { if (headers) { let urlRegExp = new RegExp(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig) // eslint-disable-line let javascriptRegExp = new RegExp(/(^javascript:[\s\S]*;$)/ig) let logRegExp = new RegExp(/(.log$)/ig) for (let i = 0; i < parsedJson.length; i++) { for (let j = 0; j < headers.length; j++) { let value = parsedJson[i][headers[j]] let isUrl = urlRegExp.test(value) || javascriptRegExp.test(value) let isLog = logRegExp.test(value) if (isUrl) { // If value is URL we auto-create a link tbCon += tdRow.format(link.format(value)) } else if (isLog) { tbCon += tdRow.format(log.format(value)) } else { if (value) { if (typeof (value) === 'object') { // for supporting nested tables tbCon += tdRow.format(convertJsonToTable(eval(value.data), value.tableId, value.tableClassName, value.linkText)) // eslint-disable-line } else { tbCon += tdRow.format(value) } } else { // If value == null we format it like PhpMyAdmin NULL values tbCon += tdRow.format(italic.format(value).toUpperCase()) } } } trCon += tr.format(tbCon) tbCon = '' } } } tb = tb.format(trCon) tbl = tbl.format(th, tb) return tbl } return null } window.convertJsonToTable = convertJsonToTable