JavaScript で JSON オブジェクトから値を取得する

Anika Tabassum Era 2023年10月12日
  1. JavaScript で JSON.parse() メソッドを使用して JSON オブジェクトを解析する
  2. JavaScript で JSON オブジェクトをエンコードする
JavaScript で JSON オブジェクトから値を取得する

Web サーバーからデータを受信する場合、形式は JSON(Web アプリのデータ交換形式)です。このフォーマットは、key:value ペアでデータをプレビューし、{}(オブジェクトの場合)または [](配列の場合)で開始および終了します。キーは常に文字列になる傾向があり、値は文字列やその他のデータ型にすることもできます。

この記事では、JavaScript で JSON オブジェクトから値を取得する方法を紹介します。

JavaScript で JSON.parse() メソッドを使用して JSON オブジェクトを解析する

次の JSON オブジェクトを受信データと考えてみましょう。

JSON 解析は一重引用符をサポートしていません。
{
"employee": {
    "name": "Roy Mustang",
	"age": 35,
	"favoriteColor": ["Blue", "Black", "Purple"],
	"siblings": {
		"Liza": 20, "Emily": 12
		}
	}
}

次のコードセグメントと画像は、解析方法を示しています。

コードスニペット:

const json = `{
  "employee": {
    "name": "Roy Mustang",
    "age": 35,
    "favoriteColor": ["Blue", "Black", "Purple"],
    "siblings": {
      "Liza": 20, "Emily": 12
      }
    }
  }`;

var data = JSON.parse(json);

var i;

for (i in data) {
  if (data[i] instanceof Object) {
    console.log(data[i]);
  }
}

出力:

JSON を JavaScript に解析します

JavaScript のドット (.) オペレーションで個別の JSON データにアクセスする

すでにデータを解析しているので、ドット(.)操作を使用して key:value ペアの個々の値を抽出してみましょう。

コードスニペット:

const json = `{
  "employee": {
    "name": "Roy Mustang",
    "age": 35,
    "favoriteColor": ["Blue", "Black", "Purple"],
    "siblings": {
      "Liza": 20, "Emily": 12
      }
    }
  }`;

var data = JSON.parse(json);

console.log(data.employee.name);
console.log(data.employee.favoriteColor[2]);
console.log(data.employee.siblings);
console.log(data.employee.siblings.Liza);

出力:

javascript のドット操作で個人を解析する

JavaScript でブラケット [] を使用して個々の JSON データにアクセスする

この規則により、配列がデータにアクセスするのと同様の方法でデータを取得できます。

コードスニペット:

const json = `{
  "employee": {
    "name": "Roy Mustang",
    "age": 35,
    "favoriteColor": ["Blue", "Black", "Purple"],
    "siblings": {
      "Liza": 20, "Emily": 12
      }
    }
  }`;

var data = JSON.parse(json);

console.log(data['employee']['name']);
console.log(data['employee']['favoriteColor'][2]);
console.log(data['employee']['siblings']);
console.log(data['employee']['siblings']['Emily']);

出力:

javascript の括弧で個人を解析します

JavaScript で JSON オブジェクトをエンコードする

おそらく、JSON オブジェクトを変更してサーバーに再送信するか、JavaScript を JSON 形式に変換する必要があります。大きなサイズの JSON オブジェクトを編集するのは難しいため、これは多くの場合役立ちます。したがって、オブジェクトを解析して同じ形式にリダイレクトした後、JSON.stringify メソッドを使用します。

コードスニペット:

const json = `{
  "employee": {
    "name": "Roy Mustang",
    "age": 35,
    "favoriteColor": ["Blue", "Black", "Purple"],
    "siblings": {
       "Liza": 20, "Emily": 12
      }
    }
  }`;

var data = JSON.parse(json);
data.employee.name = 'Riza Hawkeye';
const new_data = JSON.stringify(data);
console.log(new_data);

出力:

JavaScript JSON.stringify

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook