Array von JSON-Objekten in JavaScript verwenden

1. Erstellen eines Arrays von JSON-Objekten
2. Auf ein Objekt aus einem Array von JSON-Objekten zugreifen
3. Iterieren über ein Array von JSON-Objekten
4. Hinzufügen eines Objekts zum Array von JSON-Objekten
5. Entfernen eines Objekts aus einem JSON-Objektarray
6. Suche nach einem Element aus dem Array der JSON-Objekte

Ein JSON-Objekt ist ein einfaches JavaScript-Objekt. Wir können ein Array mit vielen ähnlichen JSON-Objekten erstellen. Im Gegensatz zu den Sprachen wie C, C++, Java usw. ist es in Javascript einfach, das JSON-Objektarray zu handhaben. Es ist vergleichbar mit einem Struktur-Array in C oder einem Array eines Klassenobjekts in Java. In diesem Artikel werden wir besprechen, wie Sie ein JSON-Objektarray erstellen, indem Sie ein Element iterieren und darin finden.

Erstellen eines Arrays von JSON-Objekten

Wir können ein Array von JSON-Objekten entweder durch Zuweisen eines JSON-Arrays zu einer Variablen oder durch dynamisches Hinzufügen von Werten in einem Objektarray mit dem Operator .push() oder durch Hinzufügen eines Objekts an einem Index des Arrays mit Schleifenkonstrukten wie dem for-Schleife oder while-Schleife. Lesen Sie den folgenden Code zum besseren Verständnis.

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));

Ausgabe:

[{"id":1,"name":"January"},{"id":2,"name":"February"}]
[{"id":1,"name":"January"},{"id":2,"name":"February"}]

Im obigen Code enthält die Variable months das Array der explizit zugewiesenen JSON-Objekte, während das monthsArray ein Array von JSON-Objekten ist, das durch Zuweisen von Werten in einer for-Schleife erstellt wird. Wir verwenden die Array-Funktion .push(), um das generierte Javascript-Objekt am Ende des monthsArray hinzuzufügen. Beachten Sie, dass beide Arrays dieselbe Struktur anzeigen, wenn sie mit der JavaScript-Anweisung console.log() protokolliert werden. Die Funktion JSON.stringify() wandelt das JSON-Array in ein String-Format um, um es in ein menschenlesbares Format zu bringen.

Auf ein Objekt aus einem Array von JSON-Objekten zugreifen

Wir haben ein JSON-Objektarray erstellt. Sehen wir uns an, wie wir auf ein Element dieses Arrays zugreifen können. Der Ansatz ist der gleiche wie bei einem einfachen String-Array oder einem Zahlen-Array. Wir können auf ein Array-Objekt zugreifen, indem wir den Array-Index verwenden (der bei 0 beginnt) und den Objektwert an diesem Index manipulieren. Siehe den folgenden Code.

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);

Ausgabe:

1
January
3
March

Im Code haben wir den Wert der Objektparameter geändert, indem wir auf den ersten Index des Arrays months mit dem array Index zugegriffen haben. Auf ähnliche Weise können wir den Wert jedes anderen Objekts des Arrays mithilfe seines Index ändern.

Iterieren über ein Array von JSON-Objekten

Wir können das Objekt-Array auf die gleiche Weise wie bei einem String-Array oder einem Zahlen-Array durchlaufen. Wir können für unseren Zweck eine for-Schleife oder eine while-Schleife verwenden. Wir können auf die Elemente über die Array-Indizes zugreifen. Wir iterieren das Array vom 0. Index bis zur Arraylänge. Das Attribut .length gibt auch die Länge des Objekt-Arrays zurück. Lesen Sie den folgenden Code, der die Iteration des Arrays und des Druckwerts jedes darin enthaltenen Objekts zeigt.

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}`)
}

Ausgabe:

0 id:1, name:January
1 id:2, name:February

Hinzufügen eines Objekts zum Array von JSON-Objekten

Wir haben ein Array von Objekten erstellt und über sie iteriert. Sehen wir uns nun an, wie Sie dem JSON-Array Elemente hinzufügen. Wir können die Funktion .push() verwenden, um ein JSON-Objekt am Ende des Arrays hinzuzufügen. Die Funktion .unshift() fügt ein Element am Anfang eines JSON-Arrays hinzu. Die .splice() fügt ein Objekt an einem angegebenen Index in ein Array ein. Sehen Sie sich den folgenden Code an, der die Verwendung jeder dieser Funktionen darstellt.

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));

Ausgabe:

[{"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"}]

Beachten Sie, dass wir die Funktion .splice() verwenden können, um Objekte aus einem Array durch neuere Werte zu ersetzen, die als Parameter übergeben werden. Der erste Parameter der Methode .splice() ist der Index, in dem wir die Operationen ausführen. Als zweiten Parameter nennen wir die Anzahl der Elemente, die wir ersetzen möchten. Der letzte Parameter ist der Wert, den wir in das Array einfügen.

Entfernen eines Objekts aus einem JSON-Objektarray

Wir können Elemente aus einem Objektarray auf ähnliche Weise wie bei einfachen JavaScript-Arrays entfernen. Wir können die Methode .pop() von Javascript verwenden, um das Element vom Ende des Arrays der JSON-Objekte zu entfernen. Die .shift() entfernt ein Objekt vom Anfang des JSON-Objekt-Arrays. Die Funktion .splice() entfernt ein Element an einem angegebenen Index des JSON-Arrays. Siehe den folgenden Code.

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));

Ausgabe:

[{"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"}]

Suche nach einem Element aus dem Array der JSON-Objekte

Wir können .indexOf() oder includes() verwenden, um zu überprüfen, ob ein Element in einem einfachen String-Array vorhanden ist. Diese Methoden funktionieren jedoch nicht für ein Array von Objekten. Wir können bestimmte ähnliche Funktionen wie .filter(), .find(), findIndex() verwenden, um zu überprüfen, ob ein Element im Array vorhanden ist. Wir können das Array manuell iterieren und überprüfen, ob das Element mit Schleifenkonstrukten (wie for-, while-Schleifen usw. Die in Javascript integrierten Funktionen wie .filter(), .find(), findIndex() sind nützlich für die Suche nach Objekten in einem JSON-Objektarray. Die Funktion .filter() gibt ein Array zurück, das die Objekte enthält, die eine bestimmte Bedingung erfüllen, .find() gibt das Objekt zurück, das die als Inline-Funktion übergebene Bedingung erfüllt, .findIndex() liefert die Index des Objekts, wenn es es im Array finden kann, andernfalls gibt es -1 zurück. Wenn wir also den Rückgabetyp der Funktionen kennen, können wir die Suchfunktionalität in einem Array von JSON-Objekten entwerfen. Sehen Sie sich den folgenden Code an, um die Verwendung von .filter(), .find(), findIndex() besser zu verstehen.

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');

Ausgabe:

April month found
January month found
April month found