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