center-key / pretty-print-json Goto Github PK

Time for v12:
https://nodejs.org/en/about/releases/

See:
.travis.yml

JavaScript objects do not require quoting key names containing the $ characters, so the output should allow the key to be unquoted.

Example:

const data = { $: '💰' };
const html = prettyPrintJson.toHtml(data, { quoteKeys: false });

Allow indentation to be customizable (indent: 3 needs to be added to the defaults map).

See:
https://github.com/center-key/pretty-print-json/blob/master/pretty-print-json.js#L43

Upgrade to more modern ES6 function definitions. The newer notation is more compact and looks better.

For example, on line 165:
https://github.com/center-key/pretty-print-json/blob/master/spec/interactive.html#L165

the function declaration:

processJson: (target, event, component) => {

should to be changed to:

processJson(target, event, component) {

See MDN web docs:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions

Love this library! Is there any chance of setting an additional option to set target='_blank' when linkUrls is true? Right now, I am clicking on links and constantly going back to the previous page. Would be nice to launch a new tab with the clickable link. Thank you!

In the HTML output, the value type can only be a number, so number is a more descriptive and accurate name.

For example, the following:

<span class=json-value>3.1415</span>

should really be:

<span class=json-number>3.1415</span>

I've noticed lately that node.js and mongosh are pretty good at not wasting lines when objects have few properties in them.
Would be really nice if pretty-print-json could present the stylers arrays on a single line.
So using 1 line instead of the 5 lines it currently uses to show the stylers arrays:

    styles: [
        {
          elementType: "geometry",
          stylers: [ { color:'#242f3e' } ],
        },
        {
          elementType: "labels.text.stroke",
          stylers: [ { color:'#242f3e' } ],
        },
        {
          elementType: "labels.text.fill",
          stylers: [ { color:'#746855' } ],
        },

Instead of the current behavior.

It's very easy to see the number of elements are in an array, or keys in an object. Then doing a sanity check on the line length to determine if it should stay on a single line or spread over multiple lines. So it's very easy to produce a space efficient presentation.

One way to easily achieve this is if we could pass our own formatting function, so that the lib calls our function with the object(s) and we we format it in some way that the lib understands (spaces on left and newlines, etc) and return it.

Note I've used:

• single quotes for improved readability vs double quotes (which weren't necessary because the strings didn't contain single quotes)
• Spaces between symbols except the colon, when there are multiple keys on a single line I prefer no space around the colon, like
  { foo:1, bar:2, baz:3 }

The great thing, is with a callback etc we can style stuff how we like.

Currently, the library doesn't support any type of line number support.
We can do hack around the generated output but it would be better to have built-in support for line number

I am willing to take the issue and work on it. Please let me know your thoughts on it.

Hey there!

Just stumbled upon this nice repo again, I'm not that familiar with releasing npm packages, but I was wondering: Why is there no azure/actions/travis pipeline? There is a .travis file, but none of the branches seem to contain a full pipeline that builds, tests and releases stuff. Am I just not looking in the right place?

Yours sincerely,

Survivorbat

Edit: I found the pipeline by clicking on the 'build: passing' passing badge

For multiline arrays and objects, the consistency of including a comma for the last item makes the code easier to edit and helps reduce merge diffs.

See:
https://jshint.com/docs/options/#trailingcomma

For example, change:

const input = {
   '$':  'Money',
   '🚀': 'Unicode'  //no comma
   };

to:

const input = {
   '$':  'Money',
   '🚀': 'Unicode',  //with comma
   };

I installed pretty-print-json package using NPM and added the this typescript and html code in my angular component:

const elem = document.getElementById("account");

if (!elem) {
  return;
}

const data = { active: true, mode: "🚃", codes: [48348, 28923, 39080], city: "London" };
elem.innerHTML = prettyPrintJson.toHtml(data, { quoteKeys: true });

<pre id="account" class="json-container dark-mode"></pre>

However I could not manage to make it work with dark mode.
The others configs are working as expected so far.

Can you guys help me, please? I think I'm missing a step.

I'm using pretty-print-json to print JSON data acquired from web server, but the order of keys displayed by pretty-print-json is not preserved - it prints keys in alphabetical descending order.

How to print json in original order? Thanks.

Configure the project to enforce the JSHint rule that prohibits var statements.

See "jshintConfig" in package.json:
https://github.com/center-key/pretty-print-json/blob/master/package.json#L21

JSHint documentation:
https://jshint.com/docs/options/#varstmt

Thank you for this nice little tool.

The problem I'm having is that by default, it does not produce valid JSON. You can see it by using the example output and putting it back to input. It ends up with error.

The valid JSON needs to "quote keys" and "no trailing commas". With that it works.

It would be nice, if those would be defaults in this tool.

I believe it'd be a great addition for this library to automatically convert links in the json data to tags so they can be clicked.

When I import

import { prettyPrintJson } from 'pretty-print-json';

then prettyPrintJson is undefined.
I have no idea why, my IDE IntelliJ has no problems resolving the module and giving type hints.

This is my tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "target": "es6",
        "module": "esnext",
        "skipLibCheck": true,
        "sourceMap": true,
        "removeComments": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "lib": [
            "es2019",
            "dom"
        ],
        "moduleResolution": "node",
        "baseUrl": "src"
    },
}

I'm using Typescript 3.9.9

Configure the project to enforce the JSHint rule that prohibits non-breaking whitespace characters.

See "jshintConfig" in package.json:
https://github.com/center-key/pretty-print-json/blob/master/package.json#L21

JSHint documentation:
https://jshint.com/docs/options/#nonbsp

Upgrade task in gulpfile.js to use:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions

Style null values with the color dimgray.

Example JSON:

{ "x": null }

Upgrade to more modern ES6 function definitions. The newer notation is more compact and looks better.

See MDN web docs:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions

I'm dynamically importing pretty-print-json.

On versions 0.4.3 and 0.4.4 the loaded object only has a default property, which is an empty object... and has no other properties in the root object or in default.
Whereas on 0.4.2 I get this, and it works.

I have tried implementing this library correctly but the output I am seeing is not showing my array formatted the way I would like/expect. I have also tried pasting my JSON into your online tool, but the format there is still not what I am needing. The array in the "body" value is still a string. Is there a way to have this library display this array as an array with proper line breaks and indentation?

Output in my project:

For improved readability, change:

const settings = Object.assign(defaults, options);

to:

const settings = { ...defaults, ...options };

While contributing to this project I noticed that sometimes the whitespace is a bit all over the place. (closing brackets on the same level as the code inside them for example)

Would you be open to a PR that either:

• Introduces prettier to keep a consistent format throughout the codebase?
• Fixes the whitespace issues manually?

Let me know so I can work on this before you potenitally push a new version (so we do everything at once)

Hi,

I'm doing a tool a send json request and print the response.
For this I have 2 textareas where I'd like to pretty print the json typed.
As far as I understand, your tool pretty prints the json in pre tags, is it possible to your it to print in textareas ?

Thanks !

I am developing a desktop application using Electron(13.1.6) and it uses Chrome version 91.0.4472.124. String.prototype.at is undefined, as it is only supported from Chrome version 92 onwards. It's causing the code to break.
Code snippet that's affected.

const noComma =    !part.end || [']', '}'].includes(match.at(-1)!);
const addComma =   settings.trailingComma && match.at(0) === ' ' && noComma;

I can upgrade my Electron version but String.prototype.at is supported since 2021-07-20 for Chrome. It's relatively new. I think there should be a polyfill support for this function.

Please add a changelog to document release changes

For example:
https://codebeautify.org/jsonviewer?url=https://httpbin.org/get
Should work for any CORS enabled web server

https://json5.org/