jpretty
v1.3.11
Published
pretty layout of json
Downloads
215
Readme
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