Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matthewmueller/json-to-dom
Fill in DOM nodes with JSON. Supports arrays and attributes.
https://github.com/matthewmueller/json-to-dom
Last synced: about 1 month ago
JSON representation
Fill in DOM nodes with JSON. Supports arrays and attributes.
- Host: GitHub
- URL: https://github.com/matthewmueller/json-to-dom
- Owner: matthewmueller
- Created: 2012-12-09T02:33:58.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2012-12-12T20:23:20.000Z (almost 12 years ago)
- Last Synced: 2024-04-08T20:10:04.861Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 140 KB
- Stars: 17
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- Changelog: History.md
Awesome Lists containing this project
README
# json-to-dom
Fill in DOM nodes with JSON. Supports arrays and attributes.
## Example
```html
title
```
```js
var json = {
title : 'Javascript',
tags : [
{ name : 'programming' },
{ name : 'javascript' }
]
};
var render = require('json-to-dom');
render(document.querySelector('.note'), json);
```
outputs:
```html
Javascript
```
## Installation
$ component install matthewmueller/json-to-dom
## Motivation
It's simpler and more flexible than most templating / binding engines.
## API
### `el = render(el, template)`
Fills in `el` with the `template`. `template` may either be an object or array.
```js
el = render(document.querySelector('.contact'), author);
```
If the element is already on the page and you don't want to alter it immediately, use `cloneNode(true)`
```js
var body = render(document.body.cloneNode(true), json);
// stuff
document.body.innerHTML = body.innerHTML;
```
## Design
### Arrays
#### json-to-dom will iterate over the selected block, even if you don't have any matched tags:
```html
-
First Name
Last Name
```
```js
var people = [
{ first : "matt", last : "mueller" },
{ first : "drew", last : "quinn" }
];
render(document.querySelector('.people'), people);
```
outputs:
```html
-
matt
mueller
-
drew
quinn
```
#### You can reference plain array values using the `.key` class:
```html
-
name
```
```js
var people = ['matt', 'drew'];
render(document.querySelector('.people'), people);
```
outputs:
```html
-
matt
-
drew
```
### Objects
#### json-to-dom will fill in the classes it finds in the block using the object's keys:
```html
```
```js
var email = {
subject : 'You inherited $11.3 million from the death of your uncle',
from : '[email protected]',
to : '[email protected]',
message : 'Reply with your bank credentials so we can send you the money'
}
render(document.querySelector('.email'), email)
```
outputs:
```html
```
### Setting attributes
#### json-to-dom will also work with attributes. The supported attributes are:
* `data-html` : will set the `innerHTML`
* `data-text` : will set the `innerText` (the default)
* `data-[attr]` : will set the `attr` (ex. `data-value`)
When you use data attributes, you have access to the other keys in the object block.
```html
```
```js
var note = {
title : "This is a note",
url : "http://notes.com"
}
render(document.querySelector('.note'), note);
```
outputs:
```html
```
#### If you'd like to not add the `innerText`, simply use a data attribute with the name of the class:
```html
```
outputs:
```html
```
## License
MIT