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",
	  "lattitude": 51.4463,
	  "longitude": 6.6396
	},
	{ "plz": 47798,
	  "city": "Krefeld",
	  "lattitude": 51.3311,
	  "longitude": 6.5616
	}
];

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

const duisburg = {
	"plz": 47051,
	"city": "Duisburg",
	"lattitude": 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", lattitude: 51.3311, longitude: 6.5616}
1 {plz: 47441, city: "Moers", lattitude: 51.4463, longitude: 6.6396}
2 {plz: 47798, city: "Krefeld", lattitude: 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", lattitude: 51.3311, longitude: 6.5616}
1 {plz: 47441, city: "Moers", lattitude: 51.4463, longitude: 6.6396}
2 {plz: 45127, city: "Essen", latitude: 51.4535, longitude: 7.0102}
3 {plz: 47798, city: "Krefeld", lattitude: 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", lattitude: 51.3311, longitude: 6.5616}

Nach mehreren Werten suchen:

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

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

Array.filter: Mehrere Objekte anhand von Bedingungen finden

const nearby = ladenlokal.filter (nearby => nearby.lattitude > 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", lattitude: 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", lattitude: 51.3311, longitude: 6.5616, imgsrc: "Krefeld-large.jpg", "richtung": "Süd"}
3 {plz: 47441, city: "Moers", lattitude: 51.4463, longitude: 6.6396, imgsrc: "Moers-large.jpg", "richtung": "Süd"}

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", lattitude: 51.3311, longitude: 6.5616, …}
1 {plz: 45127, city: "Essen", latitude: 51.4535, longitude: 7.0102, …}
2 {plz: 47798, city: "Krefeld", lattitude: 51.3311, longitude: 6.5616, …}
3 {plz: 47441, city: "Moers", lattitude: 51.4463, longitude: 6.6396, …}

Sortieren mit Handycaps: Alphabetisches Sortieren mit locale Compare

Array of Objects – numerisch, alphabetisch sortieren

Etwas einfacher, etwas schlichter, aber kompakt.

function sortBy (data, key){
	let sorted;

	// Alphabetisch
	if(key === 'city') {
		sorted = data.sort(function(a,b) {
			let x = a.city.toLowerCase();
			let y = b.city.toLowerCase();
			if (x > y) { return 1; }
			if (x < y) { return -1; }
			return 0;
		});
	}
	
	// Numerisch
	if (key === "plz") {
		sorted = data.sort (function(a,b) {
			return a.plz - b.plz;
		});
	}
	return sorted;
}


console.log ("Alphabetisch", sortBy (ladenlokal, 'city'));
console.log ("Numerisch", sortBy (ladenlokal, 'plz'));