React で JSON 文字列を解析する

1. React で JSON 文字列を解析する
2. React でローカル JSON データを解析する
3. React で外部 JSON データを解析する

JavaScript は Web の言語です。 インターネット上のデータは多くの場合、JSON 形式で交換されます。

生の JavaScript データを JSON に変換したい場合があります。 また、JSON データを解析して JavaScript データを取得する必要がある場合もあります。

この記事では、JSON データを解析して有効な JavaScript データを取得するプロセスについて説明します。

React で JSON 文字列を解析する

JSON は、Web 上でデータを交換するための最も一般的な形式です。 このため、JavaScript には組み込みの JSON.parse(str) メソッドがあり、JSON 文字列を有効な JavaScript オブジェクトに変換します。

React でローカル JSON データを解析する

通常の JavaScript オブジェクトを取得して JSON としてフォーマットする例を見てみましょう。

export default function App() {
  const sampleData = JSON.stringify({
    name: "Irakli",
    messages: ["hello", "goodbye", "good day"],
    age: 24
  });
  console.log(sampleData);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

JSON.stringify() メソッドを使用してデータを JSON 形式で保存しました。 CodeSandbox のコンソールに行って確認すると、データは JSON として保存されます。

次に、JSON.parse(str) メソッドを使用して、このデータを JSON から有効な JavaScript オブジェクトに変換します。

export default function App() {
  const sampleData = JSON.stringify({
    name: "Irakli",
    messages: ["hello", "goodbye", "good day"],
    age: 24
  });
  console.log(sampleData);
  const parsedData = JSON.parse(sampleData);
  console.log(parsedData);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

もう一度、データを console.log() して、2つの形式の違いを確認します。

JSX 内で JSON.parse() を使用する

JSX の外部で JSON データを解析する方が読みやすいです。 ただし、return ステートメント内で行うこともできます。

見てみましょう：

<div className="アプリ">
       <h1>{JSON.parse(sampleData).name}</h1>
     </div>

このコードを使用して、sampleData 変数の name プロパティを表示できます。

JSX は単なるテンプレート言語です。 これは、完全に JavaScript で記述されたトップレベルの React API にコンパイルされるため、JSX 内で JSON.parse(str) やその他の JavaScript メソッドを自由に使用できます。

React で外部 JSON データを解析する

ほとんどの場合、外部ソースから JSON データを受け取ります。 このような場合、Fetch API と関連する構文を使用して、JSON データを通常の JavaScript データに変換できます。

export default function App() {
  fetch("https://api.chucknorris.io/jokes/random?category=dev")
    .then((res) => res.json()) // the .json() for parsing
    .then((data) => console.log(data));
  return (
    <div className="App">
      <h1></h1>
    </div>
  );
}