JSON オブジェクトを JavaScript 配列に変換する

1. JavaScript で JSON オブジェクトを配列に変換するには for...in ループを使う
2. JavaScript で Object.entries() ループを使用して JSON オブジェクトを配列に変換する

他の多くのプログラミング言語と同様に、JavaScript のオブジェクトは実際のオブジェクトと比較できます。JavaScript では、オブジェクトはプロパティとタイプを持つスタンドアロンエンティティです。

たとえば、マグカップと比較してください。車はプロパティを持つオブジェクトです。車には、色、デザイン、モデル番号、ブランドなどがあります。同様に、JavaScript オブジェクトには、その特性を定義するプロパティを含めることができます。

配列は、キーが数値形式で事前定義されている特殊なタイプのオブジェクトです。任意の Javascript オブジェクトを配列に変換できます。配列は、要素インデックスとして文字列ではなく整数を使用する必要があります。

この記事では、JSON オブジェクトを配列に変換する方法を学習します。

JavaScript で JSON オブジェクトを配列に変換するには for...in ループを使う

オブジェクトを配列に変換するには、JavaScript の for...in ループを使用できます。継承された列挙可能なプロパティを含む、文字列でエンコードされたオブジェクトの列挙可能なプロパティのすべてを繰り返し処理します。たとえば、2つのプロパティを持つオブジェクトを作成し、for...in ループを使用して配列に変換してみましょう。以下のコードを参照してください。

構文：

for (variable in object) {
  statement
}

この関数は、object を繰り返します。variable には、反復ごとに異なるプロパティ名が割り当てられます。このメソッドは、object から列挙可能なプロパティのみを抽出します。詳細については、for...in メソッドのドキュメントを参照してください。

const object = {
  1: 'Hello',
  2: 'World'
};
const array = [];

for (var i in object) {
  array.push([i, object[i]]);
}
console.log(array)

上記の例では、オブジェクト 1 と 2 の 2つのプロパティを定義しました。オブジェクトを反復処理すると、オブジェクト内のすべてのプロパティがチェックされ、キーと値が配列にプッシュされます。上記のコードを任意のブラウザで実行すると、次のように出力されます。

出力：

[["1", "Hello"], ["2", "World"]]

JavaScript で Object.entries() ループを使用して JSON オブジェクトを配列に変換する

Object.entries() メソッドは、指定されたオブジェクトに固有の文字列とキーの列挙可能なプロパティペアの配列を返します。これは、for...in ループによる反復に対応します。唯一の違いは、for...in ループがプロトタイプ文字列のプロパティも一覧表示することです。

Object.entries() は、for...in ループによって提供されるのと同じ順序で配列を返します。

構文

Object.entries(obj);

entries() メソッドは、オブジェクトをパラメータとして受け取り、そのオブジェクトの列挙可能な文字列キープロパティのペアが返されます。指定されたオブジェクト自体の列挙可能な文字列キープロパティペアの配列を返します。Object.entries() は、要素がオブジェクト内の列挙可能な文字列キープロパティのペアである配列を返します。

詳細については、Object.entries() メソッドのドキュメントを参照してください。

const object = {
  1: 'Hello',
  2: 'World'
};

const array = []

    for (const [key, value] of Object.entries(object)) {
  array.push([`${key}`, `${value}`]);
}
console.log(array)

上記の例では、配列の 2つのプロパティを定義しています。エントリを使用してオブジェクトを反復処理すると、配列にプッシュされるキーとプロパティが提供されます。上記のコードを任意のブラウザで実行すると、次のように出力されます。

出力：

[["1", "Hello"], ["2", "World"]]