json2html - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #llm #go #android #rust #deep-learning #linux #windows #awesome #kubernetes #security #pytorch #open-source

json2html

(★ 645)

Json2html is a lightning fast client side javascript HTML templating library with wrappers for both jQuery and Node.js.

File Explorer

Download Latest Version (.zip)

- arrays.html
- assign.html
- components.html
- events.html
- index.html
- jquery.html
- props.html
- refresh.html
- simple.html
- table.html
- wrapper.html
- - index.html
  - test.jquery.js
  - test.native.js
- test.component.js
- test.render.data.js
- test.render.js
- test.totext.js
benchmark.js
json2html.js
LICENSE
node.json2html.d.ts
node.json2html.js
package.json
README.md

# Installation Guide

1. Get the code

git clone https://github.com/moappi/json2html

Downloads the entire project code from GitHub to your computer.

cd json2html

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install node-json2html

Downloads and installs the libraries listed in package.json.

npm run test

Type this command into your terminal and run it.

npm run benchmark

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

json2html
------------------

json2html is an open source javascript library that uses json templates to render JSON objects into HTML.

Build lightning fast, interactive client side templates using nothing but javascript.

Free to use under the MIT license.

<a href='http://www.json2html.com'>www.json2html.com</a> for full documentation.

Features
--------------

+   Native JS templates that work both the client and server
+   Interactive with embedded events directly in your templates
+   Reusable components
+   Dynamically update parts of your rendered templates when changes occur
+   Use simple inline js functions for complex logic
+   100% javascript so no need to learn special syntax

Example
--------------
```javascript
json2html.render(
    [
        {"name": "Sasha", "age":27},
        {"name": "Bobby", "age":45}
    ], 
    {"<>": "li", "html":[
    	{"<>": "span", "text": "${name} (${age} years old)"}
      ]});
    
```

Will render the following html

```html
<li>
	<span>Sasha (27 years old)</span>
</li>
<li>
	<span>Bobby (45 years old)</span>
</li>
```

jQuery
=========
Use seemlessly with jQuery, oh did we also mention that you can embed events in your template?  Forget attaching your events after you've rendered your templates.

```javascript
 {"<>":"button","text":"Click Me","onclick":(e)=>{
	alert("You just clicked this");
  }};		
```
Will render into the following html and will alert when clicked :)

```html
<button>Click Me</button>
```

Node.js
=========
Use your temlpates seemlessly on Node.js

Installation
------------

npm install node-json2html

Usage
-----
```javascript
	const json2html = require('node-json2html');
        
	let html = json2html.transform([{'name':'Bob','fruit':'Bananas'},{'name':'Rick','fruit':'Apples'}],{"<>":"div","text":"${name} likes ${fruit}"});
```

TypeScript:
```javascript
  import json2html from 'node-json2html'; //Import module
  const { render, component } = json2html; // Import methods from Json2html
```

Testing
------------

npm run test

Will run 90+ tests using mocha.  There's also a browser test package that can be run by opening /test/browser/index.html

Benchmarks
------------

npm run benchmark

Will run 5 simple benchmarks with up to 200,000 interations

<a href='http://www.json2html.com'>www.json2html.com</a> for full documentation.