【JS】forEachでJSONを扱う方法

こんにちは、今回は、本来配列に対して使うforEachでJSONファイルにループ処理をかける方法を紹介します。

早速いってみましょう。

forEachでJSONを扱う方法

まず例えば下記のようなJSONデータがあるとします。

// JSONデータの読み込み
const jsonData = {
  "users": {
    "user1": {
      "userId": 1,
      "name": "Alice",
      "age": 30
    },
    "user2": {
      "userId": 2,
      "name": "Bob",
      "age": 25
    },
    "user3": {
      "userId": 3,
      "name": "Charlie",
      "age": 35
    }
  }
};

このデータをもとにforEachでループ処理をしたいとき、どのようにするかというと

forEachは配列しか操作できないので、JSONデータを一度配列にすることで操作が可能になります。

具体的には以下のような感じ。

// usersオブジェクトのキーの配列を取得
const userKeys = Object.keys(jsonData.users);

// forEachで各ユーザーのIDと名前を表示
userKeys.forEach(key => {
  const user = jsonData.users[key];
  console.log(`UserId: ${user.userId}, Name: ${user.name}`);
});

※ここでは、各ユーザーのIDと名前をconsoleに表示するというプログラムにしています。

forEachで操作するためにJSONデータを配列にしてuserKeysに格納しています。

JSONを配列として取得するためには、Object.keys()メソッドを利用すると簡単で良いです。

const userKeys = Object.keys(jsonData.users);

Object.keys() メソッドは、JavaScriptでオブジェクトの列挙可能なプロパティ名（キー）を配列として返すメソッドです。これにより、オブジェクトのプロパティを反復処理するための配列を取得できます。

キーとなるプロパティ（users）を取得したら、forEachを使って各ユーザーのidと名前を表示します。

ここでkeyという一時変数をインデックスとして利用し、jsonDataのuserの[key]番目のデータをuserに格納します。

 const user = jsonData.users[key];
  console.log(`UserId: ${user.userId}, Name: ${user.name}`);

そしてあとは各userのuser.userIdとuser.nameを表示すれば終わりです。

まとめ

forEachでJSONを扱うためには、まず配列として取得する、ということが必要です。

この方法を覚えておくと簡単にJSONを使ったループ処理が行えるので是非活用してください。