How to apply custom formatting for a JSON stringify?

Question

I have the following code:

const sample = [
  {
    name: "apple",
    points: [ { x: 1, y: 2 }, { x: 3, y: 4 }, { x: 5, y: 6 }, { x: 7, y: 8 } ],
    age: 24
  },
  {
    name: "banana",
    points: [ { x: 1, y: 2 }, { x: 3, y: 4 }, { x: 5, y: 6 }, { x: 7, y: 8 } ],
    age: 45
  }
];

const qwer = JSON.stringify(sample, null, 2);

console.log(qwer);

If you run it, you'll notice it has nice formatting, except for the points array, which is extremely verbose.

I would like everything to be indented like normally (which is why I'm passing in 2 for the final parameter to stringify), but I would like the points array to only take a single line, like how it is declared in the code.

The reason for this is because currently each points array is stretched to like 18 lines, when there will only ever be 3 or 4 items. I would like them to stay on one line.

I tried to use a custom replacer, and while it somewhat worked, it forced the JSON array to be a string. But it's not a string. I want it to stay an array.

Is there any way to do this?

Answer 1

For the general solution, a mini parser would be the best approach, but a quick but ugly-looking approach would be to use a replacer to replace arrays with stringified strings with a unique value as a prefix which can be replaced afterwards.

const sample = [
  {
    name: "apple",
    age: 24,
    points: [ { x: 1, y: 2 }, { x: 3, y: 4 }, { x: 5, y: 6 }, { x: 7, y: 8 } ],
  },
  {
    name: "banana",
    age: 45,
    points: [ { x: 1, y: 2 }, { x: 3, y: 4 }, { x: 5, y: 6 }, { x: 7, y: 8 } ],
  }
];

const withNestedStringifiedArrays = JSON.stringify(
  sample,
  (key, value) => key && Array.isArray(value) ? '@@UNIQUE@@' + JSON.stringify(value) : value,
  2
);
const output = withNestedStringifiedArrays.replace(
  /"@@UNIQUE@@(.*?)"(,)?$/gm,
  (_, stringifiedArr, possibleComma = '') => stringifiedArr.replaceAll('\\', '') + possibleComma
);
console.log(output);