5. Neu: Reihen von Datenbanken in Javascript mit zwei
For-Schleifen alphabetisch nach einer Wunschreihe sortieren
Einleitung
Das Sortieren nach dem Alphabet eines Suchkriteriums wir nach
offiziellen Standards mit der sort ()-Methode in Verbindung mit zwei
Variablen (x,y) und einer Vergleichsprüfung in mehrdimensionalen
Arrays erledigt.
Der Javascript-Anfänger Sternenhimmelstuermer suchte eine
alternativeMethode und löste das Problem mit der Erstellung eines neuen
virtuellen zweidimensionalen Arays (erste Schleife), dass mit einem
sort() Befehl sortiert wird und danach mit einer zweiten Schleife
ausgegeben wird.
Schauen Sie sich die lauffähige Datenbankdemo an, die nach Betätigung des
Ergebnisbutton eine Tabelle unsortiert auswirft und einen Alert mit den
sortierten Daten nach Vornamen auslöst.
Der Quellcode der unsortierten Ausgabe wurde in der letzten Abhandlung erklärt, so dass hier
nur auf die Datensortierung eingegangen wird.
Inhaltsangabe
Quellcode
Erklärung
Quellcode
<html>
<head>
<meta
name="generator" content="HTML Studio">
<title>Datenbankabfrage Demo</title>
<meta
name="author" content="Sternenhimmelstuermer">
<meta
name="description" content="datenbank">
<SCRIPT LANGUAGE="JavaScript"><!--
var datenbank = new Array();
datenbank[0] = new
Array("Meyer","Uwe","Berlin","030/ 36 35");
datenbank[1] = new
Array("Müller","Anton","Berlin","030 37 33");
datenbank[2] = new
Array("Meyer","Werner","Berlin","030 38 33");
function sortAusg(){
var virtual = new
Array();
for (var i=0;i<3;i++) {
virtual[i]
= datenbank[i][1] + " "
+ datenbank[i][0] + " "
+ datenbank[i][2] + " "
+ datenbank[i][3] + "\n";
}
virtual.sort();
var real = "";
for (var i=0;i<3;i++) {
real+=
virtual[i]
}
alert (real);
}
function db() {
node =
document.getElementById("Antwort");
node.appendChild(Tabellenausgabe());
}
function db() {
node =
document.getElementById("Antwort");
node.appendChild(Tabellenausgabe());
}
function Tabellenausgabe() {
var
Tabelle = document.createElement("table");
var Tbody =
document.createElement("Tbody");
for (var
i=0;i<3;i++) {
Reihe = document.createElement("tr");
Zelle = document.createElement("td");
Zelle1 =
document.createElement("td");
ZellenInhalt =
document.createTextNode(datenbank[i][0] + ";" + datenbank[i][1] );
ZellenInhalt1 =
document.createTextNode(datenbank[i][2] + ";" + datenbank[i][3]);
Zelle.appendChild(ZellenInhalt);
Zelle1.appendChild(ZellenInhalt1);
Reihe.appendChild(Zelle);
Reihe.appendChild(Zelle1);
Tbody.appendChild(Reihe);
}
Tabelle.appendChild(Tbody);
Tabelle.setAttribute("border",1);
Tabelle.style.bordercolor = 'red';
Tabelle.style.backgroundColor = 'yellow';
return
Tabelle;
}
//--></SCRIPT>
</head>
<body>
<center>
<FORM
NAME="datenbankForm">
<div>Ein Kleiner
Datenbanktest<div>
<br>
<br>
<div>Druecken Sie den
Ergebnisbutton.Alle Daten werden gedruckt und ein Alert mit den nach
Vornamen sortierten Datenbankeinträgen generiert.</div>
<INPUT TYPE="BUTTON"
onClick="db(),sortAusg()"
VALUE="Ergebnis">
Antwortfeld: <div
ID="Antwort">Hier steht die Datenbank unsortiert</div>
</FORM></center>
</body>
</html>
Erklärung
Mit dem Betätigen des Ergebnisbutton löst der User die Funktion sortAusg()
aus.
Diese greift auf die bestehende Datenbank :
var datenbank =
new Array();
datenbank[0] = new
Array("Meyer","Uwe","Berlin","030/ 36 35");
datenbank[1] = new
Array("Müller","Anton","Berlin","030 37 33");
datenbank[2] = new
Array("Meyer","Werner","Berlin","030 38 33");
zu.
Erst einmal virtualisieren wir dazu die Datenbank, um sie zu sortieren:
var virtual =
new Array();
for (var i=0;i<3;i++) {
virtual[i]
= datenbank[i][1] + " "
+ datenbank[i][0] + " "
+ datenbank[i][2] + " "
+ datenbank[i][3] + "\n";
}
virtual.sort();
Dazu erstellen wir ein neues Array (var virtual = new Array();),
das in einer Schleife von 0-2 (
for (var i=0;i<3;i++) {) mit Werten aus der
Datenbank ( datenbank[i][1]
+ " " + datenbank[i][0]
+ " " + datenbank[i][2]
+ " " + datenbank[i][3])
gefüllt wird. Der Schalter "\n" sorgt für Zeilenumbrüche.
Wir haben nach Schleifendurchlauf also mit dem eingesetzen i im neuen
Array 3 Zeilen. Gehen wir mal die Zeile 0, was in Javascript der ersten
Zeile entspricht durch:
i ist also 0 also steht hier:
virtual[o]
erste virtuelle Zeile ist gleich datenbank[0][1] (Vorname: Uwe)
+ " " + datenbank[0[0]
(Nachname: Meyer) + " " + datenbank[0][2]
(Stadt Berlin)+ " " + datenbank[0][3]
(Telefonnummer).
Zur Erinnerung: Javascript vergibt die Doppelzahlen als Index des
Wertes automatisch. Deshalb ist datenbank[0][1] eben der
Vorname Meyer!
Es ist wichtig, dass der Vorname an erster Stelle steht, denn
nach diesem wollen wir suchen - da könnte jetzt auch der Nachname
oder die Stadt stehen, wenn man nach diesen Kriterien sortieren will..., egal, jetzt wird dieses virtuelle Array mit
dem Befehl virtual.sort()
nach Vornamen sortiert, weil diese an erster Stelle stehen.
Tja, was Profis eben scheinbar auch nicht so wissen ist, dass im
virtuellen Array eine Sortierung möglich ist, da nun auf den nullten
Wert der einzelnen Arrays automatisch zugegriffen wird, was jetzt der
Vorname ist...
Danach muss das sortierte Array wieder ausgegeben werden:
var real = "";
for (var i=0;i<3;i++) {
real+=
virtual[i]
}
alert (real);
}
Dazu wird eine Varibale (var real )
gebildet und alle virtuellen virtual[i] Arrays
werden mit einer Schleife (
for (var i=0;i<3;i++) {) durchlaufen und bei jedem
Schleifendurchlauf wird der Variablen
(real
) eine Zeile (real+)
des sortierten Arrays (virtual)
übergeben.
Praktischerweise mit dem Zeilenschalter "\n"
, der nun aktiv wird und dafür sorgt, dass die Ausgabe von dem Alert (real)
wirklich Zeilenweise erfolgt. Ansonsten haben Sie - egal welche
Ausgabemethode von der Variablen real
auch immer gewählt wird - wilde Zeilenumbrüche und die
Datenbankstruktur wird zerstört, was eine Automatisierung in der
Weiterverarbeitung unmöglich macht.
Probieren Sie nun ruhig aus, dass Array nach Nachnamen umzustellen. Sie
werden immer ein valides Ergebnis erhalten.
Ach ja, auf das Array virtual können können Sie natürlich zugreifen, aber was nutzt das, außer bei der sortierten Ausgabe? virtual [0][0] ist ohne Zweifel der nun alphabetisch sortierte Vorname Anton, der datenbank [1][1] entspricht. Gut zu wissen, aber ein wenig sinnentleert...
Ratschlag: Sie können die sort () Methode nicht mit einem Array mit dem
Namen datenbank durchgängig ohne Schaffung eines weiteren zweiten arrays mit anderen Namen anwenden (virtual) , weil datenbank als
geschriebener Text sich immer mit einem zweiten sortierten virtuellen Array namens
datenbank beißen würde.
Spätestens bei einer weiteren Funktion könnte die Frage entstehen -
meint der jetzt das sortierte virtuelle Array oder das original
geschriebene..?
Das ist eine Frage der Logik, die der Pragmatiker Sternenhimmelstuermer
nach Intuition immer negieren würde, ein Profi kann ihnen das
sicherlich mit irgendwelchen Modellen besser erklären, aber der
Sternenhimmelstuermer kommt bekanntlich aus dem Batchbereich - dort
verschiebt er Variablen nach der Computerlogik und überträgt dieses
Schema einfach effektiv auf Javascript.
Der Weg über X,Y... ist einfach zu kompliziert, wenn zwei einfache
For-Schleifen denselben Effekt simulieren...