JSON formatting, collapsing short rows?
Tags: discuss, json
Published: 2019-11-27 15:50:17

---
title: JSON formatting, collapsing short rows?
published: true
tags: discuss, json
---

When presenting JSON data for human consumption, web browsers have the standard `JSON.stringify` method that allows for additional parameters to indent and "prettify" the output (e.g. `JSON.stringify(dataObj, null, 2)`), which works for most data. However, when dealing with data that has lots of little, nested parts, or short arrays, expanding them completely makes for a very tall, skinny output. For example, dealing with a `package.json` file that has ESLint configurations in it:


```json
{
  "name": "My Awesome Project",
  "version": "1.0.0",
  "eslintConfig": {
    "extends": "eslint:recommended",
    "rules": {
      "array-bracket-spacing": [
        1,
        "never"
      ],
      "block-scoped-var": 1,
      "block-spacing": [
        1,
        "always"
      ],
      "comma-spacing": [
        1,
        {
          "before": false,
          "after": true
        }
      ]
    }
  }
}
```

That's how a `stringify` with an indent of 2 spaces would format that object. However, to make it easier to view all the ESLint rules in place in a tidy column, and take advantage of the horizontal space a bit more, one could write it out like this:

```json
{
  "name": "My Awesome Project",
  "version": "1.0.0",
  "eslintConfig": {
    "extends": "eslint:recommended",
    "rules": {
      "array-bracket-spacing": [1, "never"],
      "block-scoped-var": 1,
      "block-spacing": [1, "always"],
      "comma-spacing": [1, { "before": false, "after": true }]
    }
  }
}
```

Essentially, the logic being followed here is "if the child element, when written out inline, makes the line less than a certain threshold (e.g. 80 characters), write out inline. Otherwise, expand out as normal".

Alternatively, it could be processed as "beyond a certain depth in the object, export items inline, rather than indented".

Are there any parsing libraries for JSON that already give formatting options like this, to find a better balance between "human readable" and "using all available whitespace fully"?

Another formatting optimization I'd like to see is when dealing with long arrays of short values. For example:

```json
{
  "dataSeries": [ 1,  5, 24, 66, 23, 45, 67, 34, 11, 87,
                  2, 91, 16, 12,  7, 13,  3,  1, 45, 12,
                 78, 12, 19, 83, 21, 14],
  "christmas": ["A",  "B", "C", "D", "E", "F", "G", "H", "I", "J",
                "K", null, "M", "N", "O", "P", "Q", "R", "S", "T",
                "U",  "V", "W", "X", "Y", "Z"],
  "months": [ "January", "February",  "March",     "April",     "May",
                 "June",     "July", "August", "September", "October",   
             "November", "December"]
}
```

If using a standard `JSON.stringify` with that object, you'd get a very tall, skinny output, where each of those arrays of data might not fit on the screen at once. What I've done here instead is collapse the arrays, breaking at a certain line-length (up to a maximum of 10 elements per line), and "right-justifying" the contents on each column.

Anyone else think presenting JSON like this would be useful?