1.0.0
This commit is contained in:
187
public/js/jsonToTable.js
Normal file
187
public/js/jsonToTable.js
Normal file
@ -0,0 +1,187 @@
|
||||
/* 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 <afshin dot meh at gmail dot com>
|
||||
*
|
||||
* @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 = '<i>{0}</i>'
|
||||
let link = linkText ? '<a href="{0}">' + linkText + '</a>'
|
||||
: '<a href="{0}">{0}</a>'
|
||||
let log = '<a href="javascript:showLog(\'{0}\')">{0}</a>'
|
||||
|
||||
// Pattern for table
|
||||
let idMarkup = tableId ? ' id="' + tableId + '"'
|
||||
: ''
|
||||
|
||||
let classMarkup = tableClassName ? ' class="' + tableClassName + '"'
|
||||
: ''
|
||||
|
||||
let tbl = '<table border="1" cellpadding="1" cellspacing="1"' + idMarkup + classMarkup + '>{0}{1}</table>'
|
||||
|
||||
// Patterns for table content
|
||||
let th = '<thead>{0}</thead>'
|
||||
let tb = '<tbody>{0}</tbody>'
|
||||
let tr = '<tr>{0}</tr>'
|
||||
let thRow = '<th>{0}</th>'
|
||||
let tdRow = '<td>{0}</td>'
|
||||
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
|
||||
Reference in New Issue
Block a user