Attempting to create a JavaScript function for parsing JSON and producing a more aesthetically pleasing string output

Question

Attempting to create a JavaScript function for parsing JSON and producing a more aesthetically pleasing string output

While I am familiar with JSON.parse, JSON.stringify, and the npm package prettier, for some reason I still find myself manually handling this task. Let's approach it as a coding interview question without dismissing it due to not using JSON.parse and JSON.stringify as specified.

Given the string:

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

I aim to create a function that returns a properly indented JSON object string.

Desired output of the string:

This is my current 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, there is a formatting issue with the output, such as:

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

How can I rectify this format issue? Is there a more elegant or alternative method to achieve this?

javascript json

Answer 1

Answer №1

Have you experimented with the pretty printing feature of JSON.stringify?

For example:

console.log(JSON.stringify(
  ['foo', { bar: ['baz', null, 1.0, 2 ] } ],
  null,
  4 // Customize indentation with spaces or a string
));

This code will output:

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

If you prefer to use a function that beautifies your code when given as input:

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

Creating your own solution is also an option. You can start by writing -

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

const result =
  toJson(input)

In this snippet, toJson performs a basic type analysis on the 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)
}

The indent function is defined as follows -

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

To test the toJson function in your browser, expand the following snippet -

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 desired output is:

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

You can adjust the indentation by providing a second argument, such as a tab character -

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

Alternatively, you can specify a custom number of spaces for indentation -

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

Answer 2

Have you experimented with the pretty printing feature of JSON.stringify?

For example:

console.log(JSON.stringify(
  ['foo', { bar: ['baz', null, 1.0, 2 ] } ],
  null,
  4 // Customize indentation with spaces or a string
));

This code will output:

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

If you prefer to use a function that beautifies your code when given as input:

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

Creating your own solution is also an option. You can start by writing -

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

const result =
  toJson(input)

In this snippet, toJson performs a basic type analysis on the 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)
}

The indent function is defined as follows -

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

To test the toJson function in your browser, expand the following snippet -

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 desired output is:

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

You can adjust the indentation by providing a second argument, such as a tab character -

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

Alternatively, you can specify a custom number of spaces for indentation -

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

Attempting to create a JavaScript function for parsing JSON and producing a more aesthetically pleasing string output

Answer №1

Similar questions

The issue with V-for not functioning arises when creating an array from an external JSON file during

Bring in a 3-dimensional model using JSONLoader in three.js

converting SQL results to JSON format using Python

What is the best way to modify JSON data within a file?

Transforming the button behavior with jQuery

Adjust the color of a label based on a set threshold in Chart.js

Transferring HTML elements between pages

Tips for removing fields from a JSON string using .NET MVC Web Api

developing a multimedia player using HTML5

Having Trouble Utilizing json_decode to Print Array Values in PHP

How to use Chrome to open multiple windows with mailto links?

Upon refreshing, the user of the React JS application is redirected to a different page

Unable to access child props in parent event handler in React

Updating Input Values Dynamically with AJAX and MySQL

Warning: Please use a function instead of Collection#find

Having trouble with Vue and Vuex not returning the correct value in HTML?

How can I make the primary element subtly appear while keeping the secondary one hidden?

I'm having trouble with my basic routing set up and I'm struggling to understand why it's not working

What is the best way to convert string dot notation into a nested object structure?

Styling components in React using inline styles that are based on JSON values