Array mit Objects – JSON

Array von Objekten erzeugen

Ein Beispiel für ein Array von Objekten sind die Ladenlokale einer Kette. Neue Läden kommen hinzu.

const ladenlokal = [
	{ "plz": 47441,
	  "city": "Moers",
	  "latitude": 51.4463,
	  "longitude": 6.6396
	},
	{ "plz": 47798,
	  "city": "Krefeld",
	  "latitude": 51.3311,
	  "longitude": 6.5616
	}
];

Um ein neues Objekt an den Anfang zu setzen: Array.unshift.

const duisburg = {
	"plz": 47051,
	"city": "Duisburg",
	"latitude": 51.3311,
	"longitude": 6.5616
}

ladenlokal.unshift (duisburg);
console.log (ladenlokal);

Ergebnis in der Console des Browsers prüfen

Array (3)
0 {plz: 47051, city: "Duisburg", latitude: 51.3311, longitude: 6.5616}
1 {plz: 47441, city: "Moers", latitude: 51.4463, longitude: 6.6396}
2 {plz: 47798, city: "Krefeld", latitude: 51.3311, longitude: 6.5616}

Neues Element in die Mitte des Arrays: array.splice

array.splice kann nicht nur ein Element in eine bestimmte Position im Array einfügen, sondern auch gleich Elemente entfernen.

Array.splice(
  { index (Start) },
  { (wie viele Elemente sollen gelöscht werden) },
  { elements (Elemente, die eingesetzt werden) }
);

const essen = {
	"plz": 45127,
	"city": "Essen",
	"latitude": 51.4535,
	"longitude": 7.0102
}

ladenlokal.splice(2, 0, essen);

Array (4)
0 {plz: 47051, city: "Duisburg", latitude: 51.3311, longitude: 6.5616}
1 {plz: 47441, city: "Moers", latitude: 51.4463, longitude: 6.6396}
2 {plz: 45127, city: "Essen", latitude: 51.4535, longitude: 7.0102}
3 {plz: 47798, city: "Krefeld", latitude: 51.3311, longitude: 6.5616}

Iteration: Array von Objekten durchlaufen

Bevor das ganze Array abgegrast wird: Erst mal ein Objekt im Array anhand seiner Werte finden: array.find.

const lokal = ladenlokal.find (lokal => lokal.city === "Duisburg");
console.log (lokal);

{plz: 47051, city: "Duisburg", latitude: 51.3311, longitude: 6.5616}

Nach mehreren Werten suchen:

const otherlokal = ladenlokal.find (
	otherlokal => otherlokal.plz === 47441 && 
	otherlokal.latitude > 51);
console.log (otherlokal)

{plz: 47441, city: "Moers", latitude: 51.4463, longitude: 6.6396}

Array.filter: Mehrere Objekte anhand von Bedingungen finden

const nearby = ladenlokal.filter (nearby => nearby.latitude > 51);
console.log (nearby);

Und wenn JSON nur eindeutige Elemente beinhalten soll? Dann springt Set (ES6) ein: Array Set und Json-Arrays.

Array.forEach: Jedem Objekt eine Eigenschaft hinzufügen

Wenn für jedes Ladenlokal ein Bild zusätzlich eingesetzt werden soll:

ladenlokal.forEach(lokal => {
	lokal['imgsrc'] = lokal.city + "-large.jpg" ;
	if (lokal.longitude >= 6.7){
		lokal['richtung'] = "Nord";
	} else {
		lokal['richtung'] = "Süd";
	}
});

console.log (ladenlokal);

Array (4)
0 {plz: 47051, city: "Duisburg", latitude: 51.3311, longitude: 6.5616, imgsrc: "Duisburg-large.jpg", "richtung": "Süd"}
1 {plz: 45127, city: "Essen", latitude: 51.4535, longitude: 7.0102, imgsrc: "Essen-large.jpg", "richtung": "Nord"}
2 {plz: 47798, city: "Krefeld", latitude: 51.3311, longitude: 6.5616, imgsrc: "Krefeld-large.jpg", "richtung": "Süd"}
3 {plz: 47441, city: "Moers", latitude: 51.4463, longitude: 6.6396, imgsrc: "Moers-large.jpg", "richtung": "Süd"}

JSON sort: Array of Objects sortieren

Array.sort vergleicht zwei Objekte und setzt das erste Objekt auf den zweiten Platz, wenn das Ergebnis der Sortierfunktion positiv ist.

let sortedCities = ladenlokal.sort((c1, c2) => (c1.city > c2.city) ? 1 : (c1.city < c2.city) ? -1 : 0);
console.log(sortedCities);

Array (4)
0 {plz: 47051, city: "Duisburg", latitude: 51.3311, longitude: 6.5616, …}
1 {plz: 45127, city: "Essen", latitude: 51.4535, longitude: 7.0102, …}
2 {plz: 47798, city: "Krefeld", latitude: 51.3311, longitude: 6.5616, …}
3 {plz: 47441, city: "Moers", latitude: 51.4463, longitude: 6.6396, …}

Sortieren mit Handycaps: Alphabetisches Sortieren mit locale Compare

JSON-Array of Objects numerisch, alphabetisch nach beliebigen Key sortieren

Einfacher, etwas schlichter, aber kompakt, sortiert das Array nach einem Key.

/**
 * @param {Array} arr - Das Array von Objekten
 * @param {string} key - Der Key, nach dem sortiert werden soll
 * @param {string} [order="asc"] - "asc" für aufsteigend, "desc" für absteigend
 * @returns {Array} - Sortiertes neues Array
 */
function sortByKey(arr, key, order = "asc") {
	return [...arr].sort((a, b) => {
		let valA = a[key];
		let valB = b[key];

		// Zahlenvergleich
		if (typeof valA === "number" && typeof valB === "number") {
			return order === "asc" ? valA - valB : valB - valA;
		}

		// Stringvergleich (case-insensitive, deutsche Sortierung)
		valA = String(valA).toLowerCase();
		valB = String(valB).toLowerCase();
		return order === "asc"
			? valA.localeCompare(valB, "de", { sensitivity: "base" })
			: valB.localeCompare(valA, "de", { sensitivity: "base" });
	});
}

const plzsorted = sortByKey(ladenlokal, "latitude");