JavaScript JSON を見やすく出力する

pre とかにデータを JSON にして表示したい時に 1行だと見づらいのいい感じに改行して表示させたい

JSON.stringify() のオプションでいい感じに表示できる

json-formatter-js とかリッチなライブラリもあるけど、必要最小限なら JSON.stringify(data, null, 2) で事足りた

const data = [
  {name: 'Hosimiya Ichigo', type: 'cute'},
  {name: 'Kiriya Aoi', type: 'cool'},
  {name: 'Shibuki Ran', type: 'sexy'},
];

const App: FC = () => {
  return (
    <pre styles={{whiteSpace: "preWrap"}}>
     {JSON.stringify(data, null, 2)}
    </pre>
  );
}

↓ TAB space 2 でいい感じに改行された JSON が表示できた

[
  {
    "name": "Hosimiya Ichigo",
    "type": "cute"
  },
  {
    "name": "Kiriya Aoi",
    "type": "cool"
  },
  {
    "name": "Shibuki Ran",
    "type": "sexy"
  }
]