Client-Side Javascript JSON To HTML Templating Library | json2html

json2html is an open-source JavaScript library that uses js templates to convert JSON objects to HTML. Create interactive client-side templates at lightning speed using just JavaScript.

Find min/max value in the matrix in javascript, find min value in the jquery array, search for max and min value in matrix javascript, and find min/max value in the matrix in javascript.

• Native JS templates that run both client and server
• Interact with the events included directly in your templates
• 100% JavaScript so no need to learn any new syntax: Use the built-in js functions for complex logic

How to make use of it:

1. Load the json2html.js library and jQuery within the HTML document.

2. Prepare your JSON information to be rendered as HTML.

3. Define the JSON template as follows:

4. Transforms the JSON into HTML based mostly on the template you outlined.

// Vanila JS document.write( json2html.render(data,template) ); // jQuery $(function()< $(SELECTOR).json2html(data,template); >);

5. The plugin additionally helps occasion handlers based mostly on jquery’s on method.

":"li","id":"$","html":[ ":"span","html":"$ $"> ],"onclick":funciton(e)< alert("You just clicked " + e.obj.name); >>;

See Demo And Download

Official Website (moappi): Click Here

This superior jQuery/javascript plugin is developed by moappi. For extra Advanced Usage, please go to the official website.

Источник

Converting JSON object to HTML template

Since, I have so many templates, I wanted to make it JSON driven instead of just hardcoding html part.

The JSON file will look like,

Here, the page gets divided into left panel(20% width) and body(80%) and then body gets divided into vertically like 60% top and 20% bottom.

Is there any way to make this JSON into HTML?

I am new to HTML. I am basically a backend developer and trying to make it dynamic very fist time. I am looking for something like dynamic form, but not sure abt this conversion.

Have you heard about Bootstrap toolkit grid system, it would help getbootstrap.com/docs/4.1/layout/grid

Look at flex grid system, there is a good tutorial (paid here) flexbox.io and also a free skeleton like bootstrap: flexboxgrid.com

if it helps, look for templating engines like Mustache.js, handlebars etc. Refer : mustache.github.io handlebarsjs.com it will create a template for you, and everytime you can change according to different objects data.

1 Answer 1

While this question is too broad, I were/am a back end guy too, and wen’t through many ideas before landing, so I decided to post an answer and share my experience.

My intention with this is to show how simple, and with how little code, one can create something reusable and easy to maintain.

Instead of convert styles from a JSON to HTML, use what is meant for that, CSS, and here is a few samples how to manage many templates with a small style guide, and get one of the best features of all, performance.

With one CSS, making using Flexbox, and the given logic for your different templates, it could look like this.

html, body, .container < height: 100%; margin: 0; >.container, main < display: flex; /* make children flex items */ flex-direction: column; /* default flow is row */ >header, footer < /* flex column item will by default fill parent's width */ /* height is controlled by content */ >.wrapper < flex: 1; /* fill remaining height (flex column item) */ display: flex; >aside < /* flex row item will by default fill parent's height */ flex-basis: 20%; /* set width (flex column item) */ >main < flex: 1; /* fill remaining width (flex row item) */ >section < flex-basis: 60%; /* set height (flex column item) */ >section + section < /* target the 2nd section */ flex-basis: 40%; >/* for demo purpose */ header, footer, aside, section

 
Header
 
 
Section
 
Section
 
 
  

html, body, .container < height: 100%; margin: 0; >.container, main < display: flex; flex-direction: column; >header, footer < >.wrapper < flex: 1; display: flex; >aside < flex-basis: 20%; >main < flex: 1; >section < flex-basis: 60%; >section + section < flex-basis: 40%; >header, footer, aside, section

 
Header
 
 
Section
 
Section
 
  
  

html, body, .container < height: 100%; margin: 0; >.container, main < display: flex; flex-direction: column; >header, footer < >.wrapper < flex: 1; display: flex; >aside < flex-basis: 20%; >main < flex: 1; >section < flex-basis: 60%; >section + section < flex-basis: 40%; >header, footer, aside, section

 
Header
 
Section
 
Section
 
  

Or for a given template, using different CSS (only show 1 and 3 here, as 2 will be the same as the above)

html, body, .container < height: 100%; margin: 0; >.container, main < display: flex; flex-direction: column; >header, footer < >.wrapper < flex: 1; display: flex; >aside < flex-basis: 20%; >main + aside < /* target the 2nd/right aside */ display: none; >main < flex: 1; >section < flex-basis: 60%; >section + section < flex-basis: 40%; >/* for demo purpose */ header, footer, aside, section

 
Header
 
 
Section
 
Section
 
  
  

html, body, .container < height: 100%; margin: 0; >.container, main < display: flex; flex-direction: column; >header, footer < >.wrapper < flex: 1; display: flex; >aside < display: none; >main < flex: 1; >section < flex-basis: 60%; >section + section < flex-basis: 40%; >/* for demo purpose */ header, footer, aside, section

 
Header
 
 
Section
 
Section
 
  
  

Источник

Generate HTML page with JS from JSON

I’m looking for a very basic example of using Javascript to parse a JSON file and output an html file or populate an html file. All the examples I’ve located so far have code snippets and I don’t have the background to fill in the blanks between. Thank you for any fiddles (which would be awesome), links, and smart a*s comments.

You mean like var data = JSON.parse(‘<"foo": "42">‘); document.body.appendChild(document.createTextNode(data.foo)); ? Parsing JSON is easy. You can add DOM elements using the appropriate methods ( createElement , appendChild ). Which elements have to be created and which data should be shown depends on what you want, there is no canonical answer for this. It might be even better for you to use templates.

Yes, except the JSON would be on the same server in its’ own file. I just found a fiddle for it I think. jsfiddle.net/qmacro/NJMyD

5 Answers 5

Templating example

I would suggest on of templating tools for example PURE.

The purpose of such a tool is separation of logic and representation.

For example, generating a list from JSON data using mentioned tool would look like this:

JSON data file

       Hello    

This is most basic approach appropriate if you have simple JSON data (see working JSFiddle example there).. Get Started guide will walk you trough another example if basic approach isn’t suitable. For more advanced features take look at the documentation.

Alternatives

There was no particular reason that PURE has been used in above example. There are many other alternatives out there:

. or you can do it manually as explained there.

You can use a microtemplating library, like Mustache, to parse incoming JSON objects into HTML snippets using > template syntax. If your object looks like:

Using Mustache, you can render it into HTML easily using > and > to traverse nested objects:

Mustache.render('Hello, my name is > and I am > years old. > I have > hair and > eyes.>', myObj); 

Hello, my name is Joe Smith and I am 25 years old. I have red hair and blue eyes.

EDIT: more germane application — dynamically generate a control panel using a template with nested lists of objects. Here’s my template and object (HTML broken into a list and joined for clarity):

var panel = [ '
', '>', '
', '
>
', '
', '>', '>', '>', '
', '
', '>', '
', ].join('\n'); var panelObj = < cpanel: [ < name: 'playback', content: [ , , ] >, < name: 'zoom', content: [ , ] >] >; 

Then you render with Mustache:

Mustache.render(panel, panelObj); 

 
 
playback
 
play pause stop 
 
 
zoom
 
zoomIn zoomOut 
 
 
 

You might want to look at jQuery.dForm. It helps creating HTML and forms dynamically using JSON.

So i am assuming you mean your JSON contains the HTML string inside it.

you can render this in your HTML by writing your HTML as follows:

   var myjson = now thats smart!

var myList = [ < "name": "abc", "age": 50 >, < "age": "25", "hobby": "swimming" >, < "name": "xyz", "hobby": "programming" >]; // Builds the HTML Table out of myList. function buildHtmlTable(selector) < var columns = addAllColumnHeaders(myList, selector); for (var i = 0; i < myList.length; i++) < var row$ = $(''); for (var colIndex = 0; colIndex < columns.length; colIndex++) < var cellValue = myList[i][columns[colIndex]]; if (cellValue == null) cellValue = ""; row$.append($('').html(cellValue)); > $(selector).append(row$); > > // Adds a header row to the table and returns the set of columns. // Need to do union of keys from all records as some records may not contain // all records. function addAllColumnHeaders(myList, selector) < var columnSet = []; var headerTr$ = $(''); for (var i = 0; i < myList.length; i++) < var rowHash = myList[i]; for (var key in rowHash) < if ($.inArray(key, columnSet) == -1) < columnSet.push(key); headerTr$.append($('').html(key)); > > > $(selector).append(headerTr$); return columnSet; >

var _table_ = document.createElement('table'), _tr_ = document.createElement('tr'), _th_ = document.createElement('th'), _td_ = document.createElement('td'); // Builds the HTML Table out of myList json data from Ivy restful service. function buildHtmlTable(arr) < var table = _table_.cloneNode(false), columns = addAllColumnHeaders(arr, table); for (var i = 0, maxi = arr.length; i < maxi; ++i) < var tr = _tr_.cloneNode(false); for (var j = 0, maxj = columns.length; j < maxj; ++j) < var td = _td_.cloneNode(false); var cellValue = arr[i][columns[j]]; td.appendChild(document.createTextNode(arr[i][columns[j]] || '')); tr.appendChild(td); >table.appendChild(tr); > return table; > // Adds a header row to the table and returns the set of columns. // Need to do union of keys from all records as some records may not contain // all records function addAllColumnHeaders(arr, table) < var columnSet = [], tr = _tr_.cloneNode(false); for (var i = 0, l = arr.length; i < l; i++) < for (var key in arr[i]) < if (arr[i].hasOwnProperty(key) && columnSet.indexOf(key) === -1) < columnSet.push(key); var th = _th_.cloneNode(false); th.appendChild(document.createTextNode(key)); tr.appendChild(th); >> > table.appendChild(tr); return columnSet; > document.body.appendChild(buildHtmlTable([< "name": "abc", "age": 50 >, < "age": "25", "hobby": "swimming" >, < "name": "xyz", "hobby": "programming" >]));