pretty-print JSON using JavaScript

Question

How can I display JSON in an easy-to-read (for human readers) format? I\'m looking primarily for indentation and whitespace, with perhaps even colors / font-styles / etc.

Answer 1

Here is a simple JSON format/color component written in React:

const HighlightedJSON = ({ json }: Object) => {
  const highlightedJSON = jsonObj =>
    Object.keys(jsonObj).map(key => {
      const value = jsonObj[key];
      let valueType = typeof value;
      const isSimpleValue =
        ["string", "number", "boolean"].includes(valueType) || !value;
      if (isSimpleValue && valueType === "object") {
        valueType = "null";
      }
      return (
        

          {key}:
          {isSimpleValue ? (
            {`${value}`}
          ) : (
            highlightedJSON(value)
          )}
        
      );
    });
  return 
{highlightedJSON(json)}
;
};

See it working in this CodePen: https://codepen.io/benshope/pen/BxVpjo

Hope that helps!