Converts JSON to HTML UL-LI list
npm install json2html-listbash
bower install --save json2html-list
``html
`$3
`bash
npm install --save json2html-list
``js
var JSON2HTMLList = require('json2html-list');
`
How To:
`html
var jsonObj = {
prop1: 'value 1',
prop_obj: {
prop2: 'value 2',
prop3: 3,
prop4: [
'item 5',
'item 6'
]
}
};
var html = JSON2HTMLList(jsonObj);
document.getElementById('output').appendChild(html);
`Options
container: (default: div*) tag name to list container, this container will be returned
formatContainer:* function to format container element. Will receive container element as parameter
formatUl:* function to format each UL element. Will receive UL elements as parameter
formatLi:* function to format each LI element. Will receive LI elements as parameter
formatProperty:* function to format each found object property. Will receive a object property as text node
formatValue:* function to format each object or array value. Will receive the value as text node and the correspondent property (if array will receive array index)How To with Options:
`html
var jsonObj = {
prop1: 'value 1',
prop_obj: {
prop2: 'value 2',
prop3: 3,
propPre: 'This \nwill be \n a pre',
prop4: [
'item 5',
'item 6'
]
}
};
var options = {
formatContainer: function(cont) {
cont.className = 'my-container-class';
return cont;
},
formatUl: function(ul) {
ul.className = 'my-ul-class';
return ul;
},
formatLi: function(li) {
li.className = 'my-li-class';
return li;
},
formatProperty: function(prop) {
var strong = document.createElement('strong');
strong.appendChild(prop);
strong.appendChild(document.createTextNode(': '));
return strong;
},
formatValue: function(value, prop) {
var elm;
if(prop === 'propPre') {
elm = document.createElement('pre');
} else {
elm = document.createElement('span');
}
elm.appendChild(value);
return elm;
}
};
var html = JSON2HTMLList(jsonObj, options);
document.getElementById('output').appendChild(html);
`Converts this JSON
`js
{
"glossary": {
"title": "example glossary",
"GlossDiv": {
"title": "S",
"GlossList": {
"GlossEntry": {
"ID": "SGML",
"SortAs": "SGML",
"GlossTerm": "Standard Generalized Markup Language",
"Acronym": "SGML",
"Abbrev": "ISO 8879:1986",
"GlossDef": {
"para": "A meta-markup language, used to create markup languages such as DocBook.",
"GlossSeeAlso": [
"GML",
"XML"
]
},
"GlossSee": "markup"
}
}
}
}
}
`
Into this HTML
`html
- glossary
- titleexample glossary
- GlossDiv
- titleS
- GlossList
- GlossEntry
- IDSGML
- SortAsSGML
- GlossTermStandard Generalized Markup Language
- AcronymSGML
- AbbrevISO 8879:1986
- GlossDef
- paraA meta-markup language, used to create markup languages such as DocBook.
- GlossSeeAlso
- GML
- XML
- GlossSeemarkup
``