CSS, HTML und Javascript mit {stil}

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.

let 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. 

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

let 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}

dot Iteration: Array von Objekten durchlaufen

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

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

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

Nach mehreren Werten suchen:

let 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

let 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 jeden Laden 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