JSON To HTML & HTML To JSON Converter – JHson.js

Category: Javascript | July 16, 2024
Author:williamtroup
Views Total:8 views
Official Page:Go to website
Last Update:July 16, 2024
License:MIT

Preview:

JSON To HTML & HTML To JSON Converter – JHson.js

Description:

JHson.js is a lightweight and fast JavaScript library for converting between HTML and JSON.

The library converts HTML structures into JSON format so developers can easily store, manipulate, and transfer webpage layouts and data between the server and client sides. On the contrary, it also allows you to write JSON directly to the DOM for rendering.

JHson.js is perfect for developers looking to implement dynamic content updates without reloading the page, as JSON can be modified and sent back to the client for real-time updates. Additionally, for projects involving server-side rendering, it allows for the easy transfer of complex layout structures in a compact, understandable format. This simplifies the process of server-client synchronization and enhances user experience by reducing load times and improving website performance.

How to use it:

1. Load the main script ‘jhson.js’ in the document.

<script src="/dist/jhson.js"></script>

2. Get a JSON representation of a DOM element.

  • element: DOM element.
  • includeAttributes: Include attributes. Default: true.
  • includeCssStyles: Include CSS styles. Default: false.
  • includeText: Include text. Default: true.
  • includeChildren: Include children. Default: true.
  • friendlyFormat: Return JSON in easy-to-read format. Default: true.
  • indentSpaces: Default: 2.
  • ignoreNodeTypes[]: Node types to ignore.
  • ignoreCssProperties[]: CSS props to ignore.
  • ignoreAttributes[]: HTML attributes to ignore.
  • getVariables(json): Get the template variables.
  • generateUniqueMissingIds(): Generate unique IDs
const myEle = document.getElementById("myElement");
const json = $jhson.json()
.includeAttributes(true)
.includeCssStyles(false)
.includeText(true)
.includeChildren(true)
.friendlyFormat(true)
.get(myEle);

3. Inject JSON directly into the DOM for rendering.

  • html: Return all the chained functions.
  • json: JSON data.
  • templateData{}: Template data.
  • removeOriginalAttributes: Remove the the original attributes. Default: true.
  • clearOriginalHTML: Clear the original HTML. Default: true.
  • addCssToHead: Add CSS to the head section of the document. Default: true.
  • clearCssFromHead: Clear CSS styles from the head. Default: false.
  • logTemplateDataWarnings: Log template data warnings. Default: false.
  • addAttributes: Add HTML attributes. Default: true.
  • addCssProperties: Add CSS props. Default: true.
  • addText: Add text. Default: true.
  • addChildren: Add children. Default: true.
  • getVariables(json): Get the template variables
$jhson
.html()
.json(json)
.templateData({/* template data */})
.removeOriginalAttributes(true)
.clearOriginalHTML( true )
.write(myEle);

4. You can also render JSON as HTML using the data-jhson-js attribute. All available options:

  • json: JSON data.
  • templateData{}: Template data.
  • removeOriginalAttributes: Remove the the original attributes. Default: true.
  • clearOriginalHTML: Clear the original HTML. Default: true.
  • addCssToHead: Add CSS to the head section of the document. Default: true.
  • clearCssFromHead: Clear CSS styles from the head. Default: false.
  • logTemplateDataWarnings: Log template data warnings. Default: false.
  • addAttributes: Add HTML attributes. Default: true.
  • addCssProperties: Add CSS props. Default: true.
  • addText: Add text. Default: true.
  • addChildren: Add children. Default: true.
  • onBeforeRenderComplete(element): Callback
  • onRenderComplete(element): Callback
<div data-jhson-js="{ 'json': 'Your JSON' }">
  Your HTML.
</div>

5. Available options.

$jhson.setConfiguration({
  safeMode: true,
  variableWarningText: 'Template variable {{variable_name}} not found.',
  objectErrorText: 'Errors in object: {{error_1}}, {{error_2}}',
  attributeNotValidErrorText: 'The attribute '{{attribute_name}}' is not a valid object.',
  attributeNotSetErrorText: 'The attribute '{{attribute_name}}' has not been set correctly.',
  formattingNodeTypes: 'b strong i em mark small del ins sub sup'
})

Changelog:

v2.0.0 (07/16/2024)

  • Rewritten in TypeScript

v1.2.1 (06/17/2024)

  • Added export support for the global “$jhson” object, which can now be imported as “jhson.js”.

v1.2.0 (06/08/2024)

  • Renamed the binding attribute “data-jhson-options” to “data-jhson-js”.
  • The public function “setConfiguration()” can now only be called with a valid object.
  • Template variables now support defaults! This allows you to use the following syntax {{your_variable | your default value}} to specify a default value.
  • The public function “html().write()” will now only do all of its actions if the JSON specified is valid.

v1.1.0 (03/20/2024)

  • Added “use strict” support
  • Bugfixes

v1.0.0 (03/13/2024)

  • Refactor

v0.9.0 (03/11/2024)

  • Added more methods.
  • Fixed bugs.

v0.8.0 (03/11/2024)

  • Added more methods.

v0.7.0 (03/06/2024)

  • Added more methods.

v0.6.0 (03/05/2024)

  • Bugfixes & Improvements.
  • New configs & methods.

v0.5.0 (03/04/2024)

  • Bugfixes & Improvements.

v0.4.0 (03/04/2024)

  • Added more methods

v0.3.0 (03/01/2024)

  • Update

You Might Be Interested In:


Leave a Reply