Skip to content

add embed feature #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: staging
Choose a base branch
from
Open

add embed feature #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
aae2435
fix: rename processor to Jsontableify
yatishbalaji Dec 4, 2019
5c93459
fix: rename processor to Jsontableify
yatishbalaji Dec 4, 2019
f41d471
feat: add result image in readme
yatishbalaji Dec 6, 2019
3f0c492
feat: add features in readme
yatishbalaji Dec 6, 2019
c532358
feat: add features in readme
yatishbalaji Dec 6, 2019
64aab82
add embed feature
thangdjw May 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 56 additions & 69 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,85 +2,72 @@

### Install

`npm install jsontableify`

### Include

`const Jsontableify = require('jsontableify')`
`npm i jsontableify`

### Features
* `toHTML(<json_object>)`: converts json to html code
* `toHTML(<json_object>)`: converts json to html code.
* Format Date (Configurable formatting)
* Embed Links
* complex data in json/jsobject format
* Labels get capitalized
* Hide few labels from table
* Replace text
* Define section headers / main json keys
* Embed code

## Usage

```
const { html } = new JsonProcessor({
headerList: ['Phone', 'Attachments', 'PersonCompetency'], // optional - will be shown as header to table
dateFormat: 'DD-MM-YYYY', // optional- date format to be converted to if date found
**Example:**

```js
const Jsontableify = require('jsontableify');

var jsonData = {"CandidateName":"Yatish Balaji","YearsOfExperience":3,"Current CTC":10,"Expected CTC":25.0,"Address":{"CountryCode":"India","Leaving from":"12-11-2017","Leaved Till":"2019-11-06T07:00:30.103Z"},"Phone":[{"Number":"8828558654","Label":"personal","Preferred":"primary"},{"Number":"8828558123","Label":"official"}],"PersonCompetency":[{"CompetencyName":"Java","Synonyms":["sr j2ee resource","java stack","jpa","advance java"]},{"CompetencyName":"AWS","Synonyms":["aws","amazon webservice","amazon web service"]}],"Attachments":{"type":"link","value":[{"name":"Quezx Posh","link":["https://www.quezx.com/safeplace/"]},{"name":"Quezx Posh Attacment","link":["https://www.quezx.com/safeplace/"]}]}};

const html = new Jsontableify({
headerList: ['Phone', 'Attachments', 'PersonCompetency'], // optional - will be shown as level 1 header to table
dateFormat: 'DD-MM-YYYY', // optional - date format to be converted to if date found
replaceTextMap: { YearsOfExperience: 'Years Of Experience' }, // optional - key will be replaced by its value
excludeKeys: ['Current CTC'], // optional - these fields will not be displayed
}).toHtml(<JSON object>)
embeds: [
`<link rel="stylesheet" type="text/css" href="https://gitcdn.link/repo/yatishbalaji/jsontableify/master/examples/toHtml.css">`
], // optional - embed code into html response
}).toHtml(jsonData)

console.log(html);
```

### Example
## Reference
```ts
function constructor( options: object ) : this
```
{
"CandidateName": "Yatish Balaji",
"YearsOfExperience": 3,
"Current CTC": 10,
"Expected CTC": 25.0,
"Address": {
"CountryCode": "India",
"Leaving from": "12-11-2017",
"Leaved Till": "2019-11-06T07:00:30.103Z"
},
"Phone": [
{
"Number": "8828558654",
"Label": "personal",
"Preferred": "primary"
},
{
"Number": "8828558123",
"Label": "official"
}
],
"PersonCompetency": [
{
"CompetencyName": "Java",
"Synonyms": [
"sr j2ee resource",
"java stack",
"jpa",
"advance java"
]
},
{
"CompetencyName": "AWS",
"Synonyms": [
"aws",
"amazon webservice",
"amazon web service"
]
}
],
"Attachments": {
"type": "link",
"value": [
{
"name": "Quezx Posh",
"link": ["https://www.quezx.com/safeplace/"]
},
{
"name": "Quezx Posh Attacment",
"link": ["https://www.quezx.com/safeplace/"]
}
]
}
}
Used to convert jsobject/json to html and enable features
|properties|type|description|
|---|---|---|
|headerList|array(string)|Level 1 headers for the returned table|
|dateFormat|string|Date format is displayed in the table|
|replaceTextMap|object(string, string)|Override the text contained in the return table|
|excludeKeys|array(string)|Remove sensitive fields from the return table|
|embeds|array(string)|Embed the code into the returned html|

```ts
function toHtml( obj: object ) : string
```
will convert into table like
Convert input object to dist html
|properties|type|description|
|---|---|---|
|obj|any|data object in json/object/array format|

### Output

HTML preview result

![JsonTableify](examples/toHtml.png)

![JsonTableify](https://photos.app.goo.gl/DXgnRCC1XXFJR75g8)
### Templates
> Note : you can use [GitCDN](https://gitcdn.link/) to receive CDN link from git repo. another themes was stored in `/themes` dir

- classic theme : https://gitcdn.link/repo/yatishbalaji/jsontableify/master/themes/classic.css

> CSS for HTML code is present in `examples/toHtml.css`
### For fun :))
If you feel useful, please contribute and build this library with other interfaces and features
15 changes: 9 additions & 6 deletions examples/toHtml.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
const fs = require('fs');
const path = require('path');

const JsonProcessor = require('../src/jsonProcessor');
const Jsontableify = require('../src/jsontableify');

const json = JSON.parse(fs.readFileSync(path.resolve(__dirname, './example.json')), 'utf-8');

console.log(new JsonProcessor({
headerList: ['Phone', 'Attachments', 'PersonCompetency'],
dateFormat: 'DD-MM-YYYY',
replaceTextMap: { YearsOfExperience: 'Years Of Experience' },
excludeKeys: ['Current CTC'],
console.log(new Jsontableify({
headerList: ['Phone', 'Attachments', 'PersonCompetency'],
dateFormat: 'DD-MM-YYYY',
replaceTextMap: { YearsOfExperience: 'Years Of Experience' },
excludeKeys: ['Current CTC'],
embeds: [
`<link rel="stylesheet" type="text/css" href="https://gitcdn.link/repo/yatishbalaji/jsontableify/master/examples/toHtml.css">`
]
}).toHtml(json));
Binary file added examples/toHtml.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 7 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{
"name": "jsontableify",
"version": "1.0.2",
"description": "convert complex json to table (html)",
"main": "src/jsonProcessor.js",
"version": "1.0.5",
"description": "convert complex json to table (html). Its supports date, links, json arrays.",
"main": "src/jsontableify.js",
"repository": {
"type": "git",
"url": "https://github.com/yatishbalaji/jsontableify.git"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"test": "node ./examples/toHtml.js"
},
"keywords": [
"json",
Expand All @@ -17,8 +17,10 @@
"beautify",
"convert",
"table",
"tableify",
"date",
"links"
"links",
"capitalize"
],
"author": "Yatish Balaji",
"license": "ISC",
Expand Down
Loading