Giter VIP home page Giter VIP logo

json2html's Introduction

json2html

json2html is an open source javascript library that uses js 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.

www.json2html.com for full documentation.

Features

  • Native JS templates that work both the client and server
  • Interactive with embedded events directly in your templates
  • 100% Javascript so no need to learn any new syntax: use inline js functions for complex logic

Example

json2html.render(
    [
        {"name": "Justice League", "year":2021},
        {"name": "Coming 2 America", "year":2021}
    ], 
    {"<>": "li", "html":[
    	{"<>": "span", "text": "${name} (${year})"}
      ]});
    

Will render the following html

<li>
	<span>Justice League (2021)</span>
</li>
<li>
	<span>Coming 2 America (2021)</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.

 {"<>":"button","text":"Click Me","onclick":funciton(e){
	alert("You just clicked this");
  }};		

Will render into the following html and will alert when clicked :)

<button>Click Me</button>

Node.js

Use your temlpates seemlessly on Node.js (sorry no events here)

Installation

npm install node-json2html

Usage

	const json2html = require('node-json2html');
        
	let html = json2html.transform([{'male':'Bob','female':'Jane'},{'male':'Rick','female':'Ann'}],{"<>":"div","html":"${male} likes ${female}"});

www.json2html.com for full documentation.

json2html's People

Contributors

moappi avatar seebrown avatar bazineta avatar nmorse avatar aalimovs avatar nnovik avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.