JSON Formatter

Formats a JSON-string into a properly indented and aligned structure. The package contains two implementations of the formatter:

• JSONFormatter - formats a JSON-string into an indented JSON represented in HTML
• JSONFormatterBasic - formats a JSON-string into an indented JSON represented in string

The indentation (number of spaces) is controlled via indentation parameter. The formatter operates only with strings without having to converting it into a JSON object allowing it to format non-strictly valid JSON string i.e. a JSON represented by an array of objects or a JSON that has non-quoted properties.

Example: The input string

{"_id":"5f0227d65344c4288a30e9e2","age":35,"name": "Lucia Porter","gender":"female","email":"[email protected]","phone":"+1 (876) 517-2377","address":"717 Guernsey Street, Savannah, Guam, 6990","about": "Mollit in anim ex \"Lorem Lorem\" reprehenderit id 'dolore' irure qui.","tags":["amet","ullamco",45,"id","Lorem"]}

gets formatted:

• Using JSONFormatter()

<div class="jf-bracket-curly jf-bracket-open">{</div>
<div class="jf-section" style="margin-left: 24px;">
    <div><span class="jf-property">"_id"</span><span class="jf-colon">:</span>&nbsp;<span class="jf-property">"5f0227d65344c4288a30e9e2"</span><span class="jf-comma">,</span></div>
    <div><span class="jf-property">"age"</span><span class="jf-colon">:</span>&nbsp;35<span class="jf-comma">,</span></div>
    <div><span class="jf-property">"name"</span><span class="jf-colon">:</span>&nbsp;<span class="jf-property">"Lucia Porter"</span><span class="jf-comma">,</span></div>
    <div><span class="jf-property">"gender"</span><span class="jf-colon">:</span>&nbsp;<span class="jf-property">"female"</span><span class="jf-comma">,</span></div>
    <div><span class="jf-property">"email"</span><span class="jf-colon">:</span>&nbsp;<span class="jf-property">"[email protected]"</span><span class="jf-comma">,</span></div>
    <div><span class="jf-property">"phone"</span><span class="jf-colon">:</span>&nbsp;<span class="jf-property">"+1 (876) 517-2377"</span><span class="jf-comma">,</span></div>
    <div><span class="jf-property">"address"</span><span class="jf-colon">:</span>&nbsp;<span class="jf-property">"717 Guernsey Street, Savannah, Guam, 6990"</span><span class="jf-comma">,</span></div>
    <div><span class="jf-property">"about"</span><span class="jf-colon">:</span>&nbsp;<span class="jf-property">"Mollit in anim ex \"Lorem Lorem\" reprehenderit id \'dolore\' irure qui."</span><span class="jf-comma">,</span></div>
    <div>
        <span class="jf-property">"tags"</span><span class="jf-colon">:</span>&nbsp;<span class="jf-bracket-square jf-bracket-open">[</span>
        <div class="jf-section" style="margin-left: 24px;">
            <div><span class="jf-property">"amet"</span><span class="jf-comma">,</span></div>
            <div><span class="jf-property">"ullamco"</span><span class="jf-comma">,</span></div>
            <div>45<span class="jf-comma">,</span></div>
            <div><span class="jf-property">"id"</span><span class="jf-comma">,</span></div>
            <div><span class="jf-property">"Lorem"</span></div>
        </div>
        <div class="jf-bracket-square jf-bracket-close">]</div>
    </div>
</div>
<div class="jf-bracket-curly jf-bracket-close">}</div>

You can customize the way {,},[,],,,: and JSON properties look using predefined CSS-classes. See the demo project for details.

• Using JSONFormatterBasic()

{
    "_id": "5f0227d65344c4288a30e9e2",
    "age": 35,
    "name": "Lucia Porter",
    "gender": "female",
    "email": "[email protected]",
    "phone": "+1 (876) 517-2377",
    "address": "717 Guernsey Street, Savannah, Guam, 6990",
    "about": "Mollit in anim ex \"Lorem Lorem\" reprehenderit id 'dolore' irure qui.",
    "tags": [
        "amet",
        "ullamco",
        45,
        "id",
        "Lorem"
    ]
}

Note: If an input string doesn't represent a valid JSON, the original input string gets returned.

Invalid JSON input string:

{"_id":"5f0227d65344c42","age":35,name": "Lucia Porter"}

the output:

{"_id":"5f0227d65344c42","age":35,name": "Lucia Porter"}

Usage

1. Import the @kikomi/json-formatter package into you project run:

npm i @kikomi/json-formatter --save

2. Create an instance of JSONFormatter in your code:

// with default indentation
var jsonFormatter = new JSONFormatter();

// with preset indentation
var jsonFormatter = new JSONFormatter(16);

3. Format your JSON input:

var input = '{"your":"json","string":999}';
var output = jsonFormatter.format(input);

the package comes with Typescript type definitions.

Development

1. Install NodeJS
2. Install Gulp

npm i -g gulp

3. Install dependencies

npm i

Running tests

npm run test

or run tests in debug mode

npm run test:debug

Running demo project

1. Navigate to the demo folder
2. Install dependent packages

npm i

3. Build and run the demo project:

npm run serve

4. Navigate to localhost:8080

Building the project

npm run build