Commit 603030d5 authored by Zéfling's avatar Zéfling 🎨
Browse files

change to accept lists of elements or not

parent ee4c20fa
# Changelog of json2html-lib
## V0.0.3 (2020-10-14)
- change to accept lists of elements or not
## V0.0.2 (2020-10-14)
- Fix attributs render
......
......@@ -13,9 +13,11 @@ npm i json2html-lib --save
Only for demo:
- Angular 10.0.0 and more
<!--
## Demo
[See a live demonstation](http://test.ikilote.net/json2html-demo/)
-->
## Usage
......@@ -27,14 +29,26 @@ import { Json2html } from 'json2html-lib';
console.log(new Json2html({
tag: 'div',
attrs: { id: 'test1', class: 'testclasse' },
body: ['test',
body: [
'test',
{
tag: 'div',
attrs: { id: 'test2', class: 'foobar' },
body: 'test'
}
]
}, { formatting: 'inline' }).toString());
}, { formatting: 'multiline' }).toString());
/*
<div id="test1"
class="testclasse">
test
<div id="test2"
class="foobar">
test
</div>
</div>
*/
```
## Publishing the library
......
{
"name": "json2html-lib",
"version": "0.0.2",
"version": "0.0.3",
"license": "MIT",
"repository": {
"type": "git",
......
......@@ -3,10 +3,12 @@ export interface Json2htmlAttr {
[key: string]: string | number | null;
}
export type Json2htmlBody = (Json2htmlRef | string)[] | Json2htmlRef | string;
export interface Json2htmlRef {
tag: string;
attrs?: Json2htmlAttr;
body?: (Json2htmlRef | string)[] | string;
body?: Json2htmlBody;
}
export interface Json2htmlOptions {
......@@ -53,21 +55,29 @@ export class Json2html {
};
constructor(
public json: Json2htmlRef,
public json: Json2htmlRef | Json2htmlRef[],
option: Json2htmlOptions = {}
) {
Object.assign(this.options, option);
}
toString() {
return `${this._getSpacing(0)}${this._generate(0, this.json)}`;
let html = '';
if (!Array.isArray(this.json)) {
html = `${this._getSpacing(0)}${this._generate(0, this.json)}`;
} else {
this.json.forEach((element, index) => {
html += `${index > 0 ? '\n' : ''}${this._getSpacing(0)}${this._generate(0, element)}`;
});
}
return html;
}
private _generate(lvl: number, json: Json2htmlRef) {
const hasContent = !this.options.noContentTags.includes(json.tag.toLowerCase());
let string = `<${json.tag}${this._generateAttrs(lvl, json)}>`;
if (hasContent) {
let tagcontent = this._generateHtml(lvl, json);
let tagcontent = this._generateBody(lvl, json);
if (tagcontent && this._hasMultiline()) {
tagcontent = `${tagcontent}\n${this._getSpacing(lvl)}`;
}
......@@ -111,7 +121,7 @@ export class Json2html {
return string;
}
private _generateHtml(lvl: number, json: Json2htmlRef) {
private _generateBody(lvl: number, json: Json2htmlRef) {
let string = '';
if (json.body) {
if (typeof json.body === 'string') {
......@@ -119,20 +129,28 @@ export class Json2html {
string = `\n${this._getSpacing(lvl + 1)}`;
}
string += json.body;
} else if (!Array.isArray(json.body)) {
string += this._generateBodyElement(lvl, json);
} else {
json.body.forEach((element) => {
if (this._hasMultiline()) {
string += `\n${this._getSpacing(lvl + 1)}`;
}
string += typeof element === 'string'
? element
: this._generate(lvl + 1, element);
json.body.forEach(element => {
string += this._generateBodyElement(lvl, element);
});
}
}
return string;
}
private _generateBodyElement(lvl: number, element: Json2htmlRef | string): string {
let string = '';
if (this._hasMultiline()) {
string += `\n${this._getSpacing(lvl + 1)}`;
}
string += typeof element === 'string'
? element
: this._generate(lvl + 1, element);
return string;
}
private _hasMultiline(): boolean {
return this.options.formatting === 'multiline';
}
......
import { Component } from '@angular/core';
import { Json2html } from 'projects/json2html/src/public_api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor() {
constructor() {
console.log(new Json2html({
tag: 'div',
attrs: { id: 'test1', class: 'testclasse' },
body: ['test',
{
tag: 'div',
attrs: { id: 'test2', class: 'foobar' },
body: 'test'
}
]
}, { formatting: 'inline' }).toString());
console.log(new Json2html({
tag: 'div',
attrs: { id: 'test1', class: 'testclasse' },
body: [
'test',
{
tag: 'div',
attrs: { id: 'test2', class: 'foobar' },
body: 'test'
}
]
}, { formatting: 'multiline' }).toString());
console.log(new Json2html({
tag: 'div',
attrs: { id: 'test', class: 'testclasse', test: null },
body: [
'test',
{
tag: 'div',
attrs: { id: 'test-div', class: 'foo' },
body: [
'test2',
{
tag: 'div',
attrs: { id: 'test-subdiv', class: 'foobar' },
body: 'test3'
}
]
console.log(new Json2html([{
tag: 'div',
attrs: { id: 'test', class: 'testclasse', test: null },
body: [
'test',
{
tag: 'div',
attrs: { id: 'test-div', class: 'foo' },
body: [
'test2',
{
tag: 'div',
attrs: { id: 'test-subdiv', class: 'foobar' },
body: 'test3'
}
]
},
{
tag: 'hr'
},
{
tag: 'span',
attrs: { id: 'test-span', class: 'bar' },
body: [
'test2'
]
},
]
},
{
tag: 'hr'
},
{
tag: 'span',
attrs: { id: 'test-span', class: 'bar', },
body: [
'test2'
]
},
]
}, {
spaceBase: 5
}).toString());
tag: 'span',
attrs: { id: 'attr-2', class: 'bar' },
body: [
'test2'
]
}], {
spaceBase: 5
}).toString());
}
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment