Trying to implement a JSON parsing function in JavaScript to output a string in a prettier format [duplicate]

Question

I am well aware of the existence of JSON.parse and JSON.stringify and prettier the npm package. But for some reason I still have to do this by hand. Think of it as a coding interview question and please do not close this question simply because I could have used JSON.parse and JSON.stringify, as I said there is this constraint.

Here is a string "['foo', {bar:['baz',null,1.0,2]}]"

I wanted to implement a function to return a string denoting a json object with proper indentaion.

i.e. the output string should be

   [
        "foo", 
        {
            "bar":
            [
                "baz", 
                null, 
                1.0, 
                2
            ]
        }
    ]

Here is my attempt

function printJSON(str) {
    let spaces = [];
    let output = '';

    str.split('').forEach(char => {
        switch(char) {
            case '{':
            case '[':
                spaces.push('    ');
                output += char + '\n' + spaces.join('');
                break;
            case '}':
            case ']':
                spaces.pop();
                output += '\n' + spaces.join('') + char;
                break;
            case ',':
                output += char + '\n' + spaces.join('');
                break;
            default:
                output += char;
                break;
        }
    });

    console.log(output);
    return output
}

However the output format is slightly off as in

[ 
    "foo", 
     { 
        bar:[ // 🚨
            "baz", 
            null, 
            1.0, 
            2 
        ] 
    } 
] 

How can I fix this format issue? also is there a more elegant way or alternative way to achieve this?

Answer 1

Have you tried JSON.stringify's built in pretty printing?

Eg:

console.log(JSON.stringify(
  ['foo', { bar: ['baz', null, 1.0, 2 ] } ],
  null,
  4 // Indent, specify number of spaces or string
));

Outputs:

[
    "foo",
    {
        "bar": [
            "baz",
            null,
            1,
            2
        ]
    }
]

If you want to use a string as input to a function that prettifies your code:

function pretty(string) {
  var object = JSON.parse(string) /* or eval(string) */;
  return JSON.stringify(object, null, 4);
}

---

Rolling your own solution is not difficult however. We start by writing -

const input =
  ['foo', {bar:['baz',null,1.1,2]}]

const result =
  toJson(input)

Where toJson does a simple type analysis on input t -

function toJson (t, i = "  ", d = 0)
{ function toString(t)
  { switch (t?.constructor)
    { case Object:
        return [ "{", indent(Object.entries(t).map(([k, v]) => `${k}:\n${toString(v)}`).join(",\n"), i, d + 1), "}" ].join("\n")
      case Array:
        return [ "[", indent(t.map(v => toString(v)).join(",\n"), i, d + 1), "]" ].join("\n")
      case String:
        return `"${t}"`
      case Boolean:
        return t ? "true" : "false"
      default:
        return String(t ?? null)
    }
  }
  return indent(toString(t), i, d)
}

Where indent is -

const indent = (s, i = "  ", d = 0) =>
  s.split("\n").map(v => i.repeat(d) + v).join("\n")

Expand the snippet below to run toJson in your own browser -

function toJson (t, i = "  ", d = 0)
{ function toString(t)
  { switch (t?.constructor)
    { case Object:
        return [ "{", indent(Object.entries(t).map(([k, v]) => `${k}:\n${toString(v)}`).join(",\n"), i, d + 1), "}" ].join("\n")
      case Array:
        return [ "[", indent(t.map(v => toString(v)).join(",\n"), i, d + 1), "]" ].join("\n")
      case String:
        return `"${t}"`
      case Boolean:
        return t ? "true" : "false"
      default:
        return String(t ?? null)
    }
  }
  return indent(toString(t), i, d)
}

const indent = (s, i = "  ", d = 0) =>
  s.split("\n").map(v => i.repeat(d) + v).join("\n")

const input =
  ['foo', {bar:['baz',null,1.1,2]}]

const result =
  toJson(input)

console.log(result)

The result is as required -

[
  "foo",
  {
    bar:
    [
      "baz",
      null,
      1.1,
      2
    ]
  },
  true
]

You can customise the indentation by specifying a second argument, such as a tab character -

const result =
  toJson(input, "\t") // indent using a tab

Or use a custom amount of spaces -

const result =
  toJson(input, "    ") // indent using a four (4) spaces