JavaScript で JSON オブジェクトの配列を使用する
- JSON オブジェクトの配列の作成
- JSON オブジェクトの配列からオブジェクトにアクセスする
- JSON オブジェクトの配列を反復処理する
- JSON オブジェクトの配列へのオブジェクトの追加
- JSON オブジェクト配列からのオブジェクトの削除
- JSON オブジェクトの配列から要素を検索する
JSON オブジェクトは単純な JavaScript オブジェクトです。多くの同様の JSON オブジェクトを使用して配列を作成できます。C、C++、Java などの言語とは異なり、javascript では、JSON オブジェクトの配列を簡単に処理できます。これは、C の構造体配列または Java のクラスオブジェクトの配列に相当します。この記事では、JSON オブジェクト配列を繰り返して要素を見つけることで配列を作成する方法について説明します。
JSON オブジェクトの配列の作成
JSON 配列を変数に割り当てるか、.push() 演算子を使用してオブジェクト配列に値を動的に追加するか、次のようなループ構造を使用して配列のインデックスにオブジェクトを追加することにより、JSON オブジェクトの配列を作成できます。for ループまたは while ループ。理解を深めるには、次のコードを参照してください。
var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
console.log(JSON.stringify(months));
var monthNames = ['January', 'February'];
var month = {};
var monthsArray = [];
for (let i = 0; i < 2; i++) {
month.id = (i + 1);
month.name = monthNames[i];
monthsArray.push({...month});
}
console.log(JSON.stringify(monthsArray));
出力：
[{"id":1,"name":"January"},{"id":2,"name":"February"}]
[{"id":1,"name":"January"},{"id":2,"name":"February"}]
上記のコードでは、months 変数は明示的に割り当てられた JSON オブジェクトの配列を保持しますが、monthsArray は for ループ内で値を割り当てることによって作成された JSON オブジェクトの配列です。.push() 配列関数を使用して、生成された javascript オブジェクトを monthsArray の最後に追加します。JavaScript の console.log() ステートメントでログに記録すると、両方の配列が同じ構造を表示することに注意してください。JSON.stringify() 関数は、JSON 配列を文字列形式に変換して、人間が読める形式にします。
JSON オブジェクトの配列からオブジェクトにアクセスする
JSON オブジェクト配列を作成しました。この配列の要素にアクセスする方法を見てみましょう。アプローチは、単純な文字列配列または数値配列の場合と同じです。配列インデックス（0 から始まる）を使用して配列オブジェクトにアクセスし、そのインデックスでオブジェクト値を操作できます。次のコードを参照してください。
var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
console.log(months[0].id);
console.log(months[0].name);
months[0].id = 3;
months[0].name = 'March';
console.log(months[0].id);
console.log(months[0].name);
出力：
1
January
3
March
コードでは、array Index を使用して months 配列の最初のインデックスにアクセスすることにより、オブジェクトパラメータの値を変更しました。同様に、インデックスを使用して、配列の他のオブジェクトの値を変更できます。
JSON オブジェクトの配列を反復処理する
文字列配列または数値配列の場合と同じ方法で、オブジェクト配列を繰り返すことができます。目的に応じて、for` ループ`または while ループを使用できます。配列インデックスを使用して要素にアクセスできます。配列を 0 番目のインデックスから配列の長さまで繰り返します。.length 属性は、オブジェクト配列の長さも返します。配列の反復とその中の各オブジェクトの値の出力を示す次のコードを参照してください。
var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
for (let i = 0; i < months.length; i++) {
console.log(`${i} id:${months[i].id}, name:${months[i].name}`)
}
出力：
0 id:1, name:January
1 id:2, name:February
JSON オブジェクトの配列へのオブジェクトの追加
オブジェクトの配列を作成し、それらを繰り返し処理しました。次に、JSON 配列に要素を追加する方法を見てみましょう。.push() 関数を使用して、JSON オブジェクトを配列の最後に追加できます。.unshift() 関数は、JSON 配列の先頭に要素を追加します。.splice() は、配列内の指定されたインデックスにオブジェクトを挿入します。これらの各関数の使用法を示す次のコードを参照してください。
var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
months.push({'id': 4, 'name': 'April'});
console.log(JSON.stringify(months));
months.unshift({'id': 12, 'name': 'December'})
console.log(JSON.stringify(months));
months.splice(3, 0, {'id': 3, 'name': 'March'});
console.log(JSON.stringify(months));
出力：
[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":4,"name":"April"}]
[{"id":12,"name":"December"},{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":4,"name":"April"}]
[{"id":12,"name":"December"},{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"},{"id":4,"name":"April"}]
.splice() 関数を使用して、配列のオブジェクトをパラメーターとして渡された新しい値に置き換えることができることに注意してください。.splice() メソッドの最初のパラメーターは、操作を実行するインデックスです。2 番目のパラメーターとして、置き換えたい要素の数について説明します。最後のパラメーターは、配列に挿入する値です。
JSON オブジェクト配列からのオブジェクトの削除
単純な JavaScript 配列と同様の方法で、オブジェクト配列から要素を削除できます。javascript の .pop() メソッドを使用して、JSON オブジェクト配列の最後から要素を削除できます。.shift() は、JSON オブジェクト配列の先頭からオブジェクトを削除します。.splice() 関数は、JSON 配列の指定されたインデックスにある要素を削除します。次のコードを参照してください。
var months = [
{'id': 12, 'name': 'December'}, {'id': 1, 'name': 'January'},
{'id': 2, 'name': 'February'}, {'id': 3, 'name': 'March'},
{'id': 4, 'name': 'April'}
];
months.shift();
console.log(JSON.stringify(months));
months.pop();
console.log(JSON.stringify(months));
months.splice(1, 1);
console.log(JSON.stringify(months));
出力：
[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"},{"id":4,"name":"April"}]
[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"}]
[{"id":1,"name":"January"},{"id":3,"name":"March"}]
JSON オブジェクトの配列から要素を検索する
.indexOf() または includes() を使用して、要素が単純な文字列配列に存在するかどうかを確認できます。ただし、これらのメソッドはオブジェクトの配列に対しては機能しません。.filter()、.find()、findIndex() などの特定の同様の関数を使用して、要素が配列に存在するかどうかを確認できます。配列を手動で反復し、ループ構造（for、while ループなど）を使用して要素が存在するかどうかを確認できますが、コードが大きくなるため、これが最後に検討するオプションになる場合があります。.filter()、.find()、findIndex() のような javascript 組み込み関数は、JSON オブジェクト配列内のオブジェクトを検索するのに役立ちます。.filter() 関数は特定の条件を満たすオブジェクトを含む配列を返し、.find() はインライン関数として渡された条件を満たすオブジェクトを返します。findIndex() は配列内でオブジェクトが見つかった場合はオブジェクトのインデックス、それ以外の場合は -1 を返します。したがって、関数の戻り型を知ることで、JSON オブジェクトの配列で検索機能を設計できます。.filter()、.find()、findIndex() の使用法をよりよく理解するには、次のコードを参照してください。
var months = [
{'id': 12, 'name': 'December'}, {'id': 1, 'name': 'January'},
{'id': 2, 'name': 'February'}, {'id': 3, 'name': 'March'},
{'id': 4, 'name': 'April'}
];
(months.filter(i => i.name === 'April').length) ?
console.log('April month found') :
console.log('Not found');
(months.find(i => i.name === 'January') != {}) ?
console.log('January month found') :
console.log('Not found');
(months.findIndex(i => i.name === 'April') > -1) ?
console.log('April month found') :
console.log('Not found');
出力：
April month found
January month found
April month found