JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでJSON配列からデータを読み取る方法をサンプルコード付きで解説

Web開発では、APIから取得したJSONデータを処理する場面が非常によくあります。本記事では、JavaScriptを使ってJSON配列からデータを読み取り、画面に表示する方法を、実際に動作するサンプルコードとともにわかりやすく解説します。

JSON配列からデータを読み取る基本の流れ

JSON形式の文字列をJavaScriptで扱うには、まずJSON.parse()メソッドで文字列をJavaScriptのオブジェクト（配列）に変換します。変換後は、forEach()メソッドなどを活用して、配列の各要素に格納された値へ簡単にアクセスできます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample,.result {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScriptでJSON配列からデータを読み取る</h1>
<div class="sample">
[{"name":"Rohan","age":22}, {"name":"Shawn","age":12} ,{"name":"Michael","age":21}]
</div>
<div class="result" style="color: green;"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックするとJSON配列からデータを読み込みます</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let resultEle = document.querySelector(".result");
    let parsedJson = JSON.parse(sampleEle.innerHTML);
    document.querySelector(".Btn").addEventListener("click", () => {
        parsedJson.forEach((item) => {
            resultEle.innerHTML += "Name = " + item.name + "";
            resultEle.innerHTML += "Age = " + item.age + "";
        });
    });
</script>
</body>
</html>

出力結果

上記のコードをブラウザで開くと、次のように表示されます。

JavaScriptでJSON配列からデータを読み取る方法をサンプルコード付きで解説

「CLICK HERE」ボタンをクリックすると、JSON配列から読み取った名前と年齢のデータが緑色で一覧表示されます。

JavaScriptでJSON配列からデータを読み取る方法をサンプルコード付きで解説

コードのポイント解説

1. JSON.parse()で文字列を配列に変換

let parsedJson = JSON.parse(sampleEle.innerHTML);

この行では、HTML要素内のJSON文字列をJSON.parse()で解析し、JavaScriptの配列に変換しています。これにより、通常のオブジェクト配列として自由に操作できるようになります。

2. forEach()で各要素の値を取り出す

parsedJson.forEach((item) => { ... });

変換後の配列に対してforEach()を実行することで、各オブジェクトのnameプロパティとageプロパティの値を順番に取り出し、結果表示用の要素に追記していきます。

まとめ

JavaScriptでJSON配列からデータを読み取る際の重要ポイントは以下の2つです。

  • JSON.parse()：JSON形式の文字列をJavaScriptのオブジェクトや配列に変換する
  • forEach()：変換した配列をループ処理し、各要素のプロパティにアクセスする

APIから受け取ったJSONデータもまったく同じ要領で処理できるため、この2つの使い方は必ず押さえておきましょう。

  1. JavaScriptでCookieを読み取る方法を解説！サンプルコード付き

    JavaScriptでは、document.cookieプロパティを使用することで、ブラウザに保存されているCookieを簡単に読み取ることができます。本記事では、実際に動作するサンプルコードをもとに、Cookieの読み取り方法をわかりやすく解説します。 注意：このサンプルを実行するには、ローカルサーバー環境が必要です。HTMLファイルを直接ブラウザで開いた場合、Cookieが正しく機能しないことがあります。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  2. JavaScriptの配列を文字列に変換する方法【toString()の使い方を解説】

    JavaScriptで配列の要素をひとつの文字列として扱いたい場面はよくあります。そんなときに便利なのがtoString()メソッドです。このメソッドを使うと、配列の各要素がカンマ（,）で区切られたひとつの文字列に変換されます。以下は、ボタンをクリックすると配列の中身が文字列として画面に表示されるシンプルなサンプルコードです。サンプルコード<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-