JSON formatting, collapsing short rows?

Brooks Boyd — Wed, 27 Nov 2019 15:50:17 +0000

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:

{
  "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:

{
  "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:

{
  "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?

DEV Community: Brooks Boyd

JSON formatting, collapsing short rows?