Array mit Objects – JSON

JSON als Datenformat liegt fast immer als ein Array von Javascript-Objekten vor, das wir aus JSON-Dateien oder von der API – dem Application Programming Interface – externer Dienste einlesen.

Oft erzeugen und manipulieren wir diese Arrays, fügen neue Objekte ein, löschen Objekte und sortieren Objekte.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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
	}
];
Standortsuche mit Javascript und JSON

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