JavaScript utility to display a server-side object as an HTML table with collapsible nested content
npm install basic-formatting-utilsThis NPM module is a development/debugging tool designed to display the contents of one or more server-side objects as HTML tables.
This utility is designed to run inside a stateless container. Therefore, the generated HTML has been designed such that it will not make any further calls back to the app that generated it because that app probably no longer exists.
The screen shot below shows what the first few properties of the NodeJS process object might look like when displayed using the HTML generated by this utility.
* Object properties are listed in alphabetic order
* Only object properties of type Object, Array, Map or Set are considered expandable
* Click on the expand/collapse button in the Type column to hide or display this data
* By default:
* Expandable object properties will be displayed in a collapsed state
* Object properties of types Function and GeneratorFunction will be suppressed from the display
* If you choose to display functions names (by calling show_fns()), their source code of will not be displayed
When developing NodeJS apps, I frequently want to see inside the server-side objects with which I'm working. This is particulary true when I'm learning my way around a new framework.
To see inside objects, people typicially dump the object contents to the console using JSON.stringify; however, this approach has two problems:
1. The string representation created by JSON.stringify (even with the formatting options) can be difficult to read - especially if the object is large and deep
1. There is a more serious problem however: JSON.stringify() explodes when passed an object containing circular references
Therefore, rather than resorting to the tedious, trial-and-error approach of repeatedly calling JSON.stringify within a try/catch block, I decided to create a more user-friendly result by transforming the object into an HTML table whose rows could be expanded or collapsed as necessary.
The show_object function transforms a JavaScript object into an HTML table. If any property of this object is considered expandable (I.E. is of type Map, Object, Array or Set), then this property value will itself be transformed into a nested HTML table.
Transformation of expandable properties continues recursively until the pre-determined depth limit is reached. This is how I avoid circular references blowing up in my face...
By default, the depth limit is set to 3, but this can be adjusted by passing a positive integer to set_depth_limit()
By default, object properties of type Function or GeneratorFunction are suppressed altogether from the display. If however, you wish to display these properties, then call function show_fns().
> IMPORTANT
> Function source code will never be displayed.
Typically, the HTML generated by this utility will form just a fragment of some larger Web page.
Call `` var obj_as_html_div = bfu.show_object("HTTP Request", request) Enclose the call to show_object We will also display the names of properties of type bfu.show_fns() var obj_as_html_page = Call bfu.show_objects([ There are two hard-coded functions that transform the NodeJS | Name | Return Type | Description | Name | Return Type | Description | Name | Return Type | Description A set of functions generated by calling the partial function E.G. to create a function that generates an HTML paragraph element, you could write: Any content passed to an empty HTML element (such as E.G. To generate an HTML | Name | Return Type | Description Takes an array as a single argument in which each element is an object containing the following two properties | Name | Return Type | Description | Name | Return Type | Descriptionshow_object to transform the contents a server-side object into an HTML containing a :
javascript
var bfu = require('basic-formatting-utils')
var request = ... / Get an HTTP request object from somewhere /
`$3
within calls to as_body and as_html in order to generate a complete HTML page that then wraps the fragment.Function and GeneratorFunction:`javascript`
var bfu = require('basic-formatting-utils')
var request = ... / Get an HTTP request object from somewhere /
bfu.as_html([]
, bfu.as_body([]
, bfu.show_object("HTTP Request", request)
)
)$3
(plural) to transform multiple objects into separate elements that are then returned within a parent :`javascript`
var bfu = require('basic-formatting-utils')
var request = ... / Get an HTTP request object from somewhere /
var event = ... / The HTTP event that invoked this function /
{title: "HTTP request", value: request}
, {title: "HTTP event", value: event}
])$3
and global objects respectively into HTML fragments.`javascript`
var bfu = require('basic-formatting-utils')
var process_as_html_div = bfu.show_nodejs_process()
var global_as_html_div = bfu.show_nodejs_global()API
$3
|---|---|---|
| | String | Returns this utility's current package versionsizeOf
| | Number | For any object for which isExpandable returns true (see below), this function returns the number of enumerable elements/properties.0
Returns for all other data typestypeOf$3
|---|---|---|
| | String | Returns the actual data type of the objectisOfType
| | Function | Partial function that returns a function to check for a specific data type.ArrayBuffer
E.G. If you want your own type checking function to test for an , then you could writeisArrayvar isArrayBuffer = isOfType("ArrayBuffer")
| | Boolean | Does exactly what it says on the tin...isBigInt
| | Boolean | Does exactly what it says on the tin...isExpandable
| | Boolean | Returns true only for objects of type Object, Array, Map or Set.isFunction
| | Boolean | Returns true for objects of type Function or GeneratorFunction
| | Boolean | Does exactly what it says on the tin...isNull
| | Boolean | Does exactly what it says on the tin...isNullOrUndef
| | Boolean | Does exactly what it says on the tin...isNumber
| | Boolean | Does exactly what it says on the tin...isNumeric
| | Boolean | Returns true if the argument is either of type Number or BigInt
| | Boolean | Returns true both for a standard JavaScript Object and the NodeJs objects process and global.typeOf()
The latter two objects are included in this test because they return their own names when passed to . The NodeJS object WebAssembly also behaves this way, but is deliberately ignored here.isSet
| | Boolean | Does exactly what it says on the tin...isSymbol
| | Boolean | Does exactly what it says on the tin...isUndefined
| | Boolean | Does exactly what it says on the tin...as_html_el$3
|---|---|---|
| | Function | A partial function that accepts an HTML tag name and returns a function requiring two arguments.as_
See below.as_
| | String | as_html_el.as_pvar as\_p = as\_html\_el("p")Function then requires two parameters:toString()
Pass an empty array if the element does not need any defined properties function returns something usefulimg) will be ignored element having some id property and where all the table rows have been built up in some accumulator array called acc, the call would be something like:get_depth_limitas_table(
["id='someTableId'"]
, acc.join("")
)
| | Number | Returns the current recursion depth limit for displaying nested objectsset_depth_limit
| | Number | Sets a new recursion depth limit for displaying nested objects. show_fns
The default depth is 3.
| | Boolean | Switches on the display of object properties of type Function
| | Boolean | Switches off the display of object properties of type Function$3
|---|---|---|
| | String |title - Object descriptionDIV
Do not include any formatting or encoded characters in this description as it is used to generate the value of the collapsible 's id property.value - The object to be displayedE.G. To display some HTTP request object req, you would write:DIVshow_objects([
Returns a
{title: "HTTP request", value: req}
]) element containing the following children:DIV elements for each received object, each of which contains:src propertyexpand/collapse functionsshow_object
| | String | Convenience function for calling show_objects when only a single object needs to be displayed.req
E.G. To display some existing HTTP request object , you would write:show_nodejs_globalshow_object("HTTP request", req)$3
|---|---|---|
| | String | Transforms the NodeJS global object into an HTML fragmentshow_nodejs_process
| | String | Transforms the NodeJS process object into an HTML fragmentdatetime_by_timezone$3
|---|---|---|
| | String | A partial function that receives the offset (in minutes) of a given timezone from UTC and returns a function, that when passed a new Date() object, returns the current time in that timezone as a human readable string.datetime_var datetime\_jst = datetime\_by\_timezone(540) / Japan Standard Time is UTC+9 \/
var tokyo\_time = datetime\_jst(new Date())
var datetime\_brt = datetime\_by\_timezone(-180) / Brasilia Time is UTC-3 \/
var brasilia\_time = datetime\_brt(new Date())
| | String | When passed a new Date(), returns the current time for the particular zone.UTC-8.0
The only pre-configured timezone functions are: US Pacific Standard Time (_pst)UTC-5.0 US Eastern Standard Time (_est)UTC+0.0 Greenwich Mean Time (_gmt)UTC+1.0 Central European Standard Time (_cet)UTC+5.5 India Standard Time (_ist`)