Jpretty NPM | npm.io

jpretty

Make json more pretty. Transform json into an easy to read layout - js object notation, with dot delimiters and key = value output.

jPretty works in NodeJS, server-side as well as on the browser client-side.

Try jPretty working in your browser: see it online

What is json ?

JSON stands for JavaScript Object Notion, and is a syntax for storing and exchanging data written in text, that can be converted into JavaScript object notation, making it easy to work with. JSON uses a JavaScript syntax and is used for storing and transporting data over the web.

For more info check out w3schools.com.

What is jPretty ?

Some json is complex to read to decipher property names for values. This is normally due to the nesting of arrays within objects within arrays etc etc. jPretty simplifies this for you by displaying the json in an easy to read layout, that is JavaScript compatible.

for example, json: [1,{a:2,b:[3,4,{c:5}]}] tranforms into:

{}[0] = 1 
{}[1].a = 2 
{}[1].b[0] = 3 
{}[1].b[1] = 4 
{}[1].b[2].c = 5 //javascript compatible

console.log( json1[1].b[2].c ); // 5

syntax

JSON data by definition is written as name/value pairs, consisting of a field name (in double quotes), followed by a colon, followed by a value: { "name" : "value" }

jpretty accepts multiple styles as it converts the input into json. The following are valid syntax.

//valid
console.log(jPretty('{ "a": 1, "b": 2}'));
console.log(jPretty({ a: 1, b: 2}));
console.log(jPretty({ "a": 1, "b": 2}));
console.log(jPretty({ 'a': 1, 'b': 2}));
console.log(jPretty("{ 'a': 1, 'b': 2}"));
console.log(jPretty("{ a: 1, b: 2}"));

// since v1.1.5 all of above input styles will work.

run jPretty in your browser pages - client side

jPretty works on your client side browser also.

Just add the <script> tag pointing to the module jPretty.js. You can then reference it as the variable jPretty from your client-side js code.

<body>
 ...
 <p id="jpretty"></p>

 <script src="/Module-Location/jPretty.js"></script>

 <script>
   let jsonData = { "a": 1, "b": 2 };
   document.getElementById("jpretty").innerHTML = jPretty(jsonData);
 </script>
</body>
</html>

See a working sample online.

examples

let jPretty = require("jpretty");  //in nodeJS

let json1 = {
    "id": "0001",
    "type": "donut",
    "name": "Cake",
    "ppu": 0.55,
    "batters":
      {
        "batter":
          [
            { "id": "1001", "type": "Regular" },
            { "id": "1002", "type": "Chocolate" },
          ]
      },
    "topping":
      [
        { "id": "5001", "type": "None" },
        { "id": "5002", "type": "Glazed" },
        { "id": "5005", "type": "Sugar" },
      ]
};

let pJson1 = jPretty(json1);

console.log(pJson1);

{}.id = 0001
{}.type = donut
{}.name = Cake
{}.ppu = 0.55
{}.batters.batter[0].id = 1001
{}.batters.batter[0].type = Regular
{}.batters.batter[1].id = 1002
{}.batters.batter[1].type = Chocolate
{}.topping[0].id = 5001
{}.topping[0].type = None
{}.topping[1].id = 5002
{}.topping[1].type = Glazed
{}.topping[2].id = 5005
{}.topping[2].type = Sugar

console.log(json1.batters.batter[1].type); //Chocolate
console.log(json1.topping[2].type); //Sugar

Another example

let json2 = {"a":1, "b":2, "c":[1,2,3,4],"d":{"da":[1,2,3,{"daa": 4, "dab":5}],"db":{ "dba": 123}}};
console.log(jPretty(json2));

{}.a = 1
{}.b = 2
{}.c[0] = 1
{}.c[1] = 2
{}.c[2] = 3
{}.c[3] = 4
{}.d.da[0] = 1
{}.d.da[1] = 2
{}.d.da[2] = 3
{}.d.da[3].daa = 4
{}.d.da[3].dab = 5
{}.d.db.dba = 123

json jstrip jpretty

@infinitebrahmanuniverse/nolb-jp @everything-registry/sub-chunk-1970 jstrip

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago