JSON を React で表示する

1. JSON.stringify() メソッド
2. HTML の <pre> タグ
3. JSON を React で表示する

React で Web アプリケーションを構築する場合、外部データを受け取って表示することが一般的に必要になります。 JSON (JavaScript Object Notation) は、オブジェクトとして格納されたデータを共有するために一般的に使用される形式です。

この記事の焦点は、React で JSON 形式のデータを表示する方法を示すことです。

適切にフォーマットされた JSON データを出力する必要がある場合は、JSON.stringify() メソッドと HTML の <pre> 要素という 2つの概念を理解する必要があります。

JSON.stringify() メソッド

このメソッドは、有効な JavaScript オブジェクトを受け取り、それらを JSON 形式の文字列に変換します。 最大 3つの引数を取ることができます。

ただし、この記事では、有効な JavaScript オブジェクトを取得して JSON 文字列に変換する最初の引数のみを理解する必要があります。

JSON.stringify(value)

このメソッドは、文字列としてフォーマットされた value 引数 (JavaScript オブジェクト) を返します。 戻り値は、読み取り可能な JSON 文字列にフォーマットされます。 ただし、読みやすさを維持するために表示するのは難しい場合があります。

HTML の <pre> タグ

フロントエンド開発者は、<pre> タグを使用して、テキストのフォーマットを保持します。 テキスト内の文字は等幅です。

また、このタグでラップされた元のテキストのスペースと改行も保持されます。

JSON.stringify() を使用してデータを JSON 文字列に変換する場合、返された値を <pre> タグでラップする必要があります。

JSON を React で表示する

JavaScript オブジェクトを取得して JSON 文字列に変換し、きちんとした書式を保持する方法は次のとおりです。

export default function App() {
  const data = { name: "Irakli", age: 24, height: 185 };
  return (
    <div className="App">
      <p>{JSON.stringify(data)}</p>
      <pre>{JSON.stringify(data)}</pre>
    </div>
  );
}

CodeSandbox ライブ デモンストレーション を開いて、実際のコードを確認します。

ライブ デモには、<pre> タグを含む JSON 文字列と含まない JSON 文字列が含まれています。 書式設定されたテキストと書式設定されていないテキストの違いを視覚的に理解するのに役立ちます。