Enrico: Arrays werden nicht korrekt aufgebaut

Hallo,

ich möchte mittels Javascript aus einer vorausgegangenen php-Datei übernommene Formulardaten neu zusammensetzen, da ich nur bestimmte Formulardaten auf dieser Seite benötige, die verbleibenden Formulardaten werden später benötigt.

Mittels Javascript deshalb, weil ich die Formulardaten einer vorausgegangenen php-Datei clientseitig ver- und entschlüssele.

Die Übernahme sowie der Entschlüsselungsvorgang klappen einwandfrei.
Vielmehr hänge ich derzeit daran fest, wie ich die benötigten Formulareingaben neu zusammensetze.

Hier zunächst der gesamte Javascript-Code mit Nummerierung zur späteren Erklärung:

  
      function rot_13 (Text)  
      {  
         keycode = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";  
         rot13   = "";  
  
         for (z = 0, y = Text.length; z < y; z++)  
         {  
            codechar = Text.substring (z, z + 1);  
            pos      = keycode.indexOf(codechar.toUpperCase());  
  
            if (pos >= 0)  
            {  
               pos      = (pos + keycode.length / 2) % keycode.length;  
               codechar = (codechar == codechar.toUpperCase()) ? keycode.substring(pos, pos + 1) : keycode.substring(pos, pos + 1).toLowerCase();  
            }  
  
            rot13 = rot13 + codechar;  
         }  
  
         return rot13;  
      }  
  
      Felder = new Array();  
  
      Felder["Versand"] = new Array("Versandadresse", rot_13("Vorname"), rot_13("Nachname"), rot_13("StrasseNr"), rot_13("Postleitzahl"), rot_13("Ort"));  
      Felder["Kontakt"] = new Array("Kontakt", rot_13("EMailAdresse"), rot_13("Telefon"), rot_13("Telefax"));  
  
      Rubriken = new Array();  
  
      Rubrik        = "Versand";  
      Formulardaten = "Ibeanzr714=ENRICO&Anpuanzr714=MUSTERMANN&Trohegfqnghz714=01.03.1973&FgenffrAe714=MUSTER-WEG 12&Cbfgyrvgmnuy714=94469&Beg714=DEGGENDORF";  
  
[1]   Variablenpaare = Formulardaten.split("&");  
  
      for (i = 0, j = Variablenpaare.length; i < j; i++)  
      {  
[2]      VariableWert = Variablenpaare[i].split("=");  
  
         Variable = VariableWert[0];  
         Wert     = VariableWert[1];  
  
         // sessionStorage.setItem(Variable, Wert);  
  
[3]      Temp  = new Array(Felder[Rubrik][0]);  
[4]      Temp2 = new Array();  
  
[5]      for (k = 1, l = Felder[Rubrik].length; k < l; k++)  
         {  
[6]         if (Variable.indexOf(Felder[Rubrik][k]) !== -1)  
[7]            Temp2.push(Wert);  
         }  
  
[8]      Temp.push(Temp2);  
[9]      Rubriken.push(Temp);  
      }  
  
      Ausgabe = "";  
  
[10]  for (i = 0, j = Rubriken.length; i < j; i++)  
      {  
[11]     Ausgabe += Rubriken[i][0] + "<br><br>";  
  
[12]     if (Rubriken[i][0].indexOf("Versand") !== -1)  
         {  
[13]        for (k = 0, l = Rubriken[i][1].length; k < l; k++)  
            {  
[14]           Ausgabe += Rubriken[i][1][k] + " " + Rubriken[i][1][k + 1];  
  
               if (k < l - 1)  
                  Ausgabe += '</br>';  
            }  
         }  
      }  
  
      document.write(Ausgabe);  

Hier mein ausformuliertes Vorhaben:

Ich habe in diesem Javascript-Code die Daten vorgegeben, damit ich den Code besser testen kann und die Formulardaten nicht jedesmal erneut eingeben muss.

Felder["Versand"] und Felder["Kontakt"] beinhalten die Überschrift für diese Rubrik sowie die Namen der möglichen rot-verschlüsselten Formularfelder.

Die Feldnamen sind hier rot-verschlüsselt, da meine Formulare gleichnamige, aber nicht verschlüsselt benannte "Honigtöpfe" als Schutz vor Spam enthalten.

Aus den übernommenen Daten und den möglichen Formularfeldern baue ich die anzuzeigenden Daten auf.

Bezogen auf meinen Code soll folgende Ausgabe erzeugt werden:

ENRICO MUSTERMANN
MUSTER-WEG 12
94469 DEGGENDORF

Grundlage dieser gewünschten Ausgabe ist folgendes schematisches Array:

Rubrik[0] = ("Überschrift", Array mit den Formulardaten ausgefüllter Felder);
Rubrik[1] = ("Überschrift", Array mit den Formulardaten ausgefüllter Felder);

Meine Vorgehensweise ist wie folgt:

Ich splitte zunächst die Variable Formulardaten auf ([1]).

Danach durchlaufe ich alle so erhalten Elemente, die zu diesem Zeitpunkt jeweils noch aus Strings nach dem Muster "VerschlüsselterFeldname=Formulareingabe" bestehen, in einer Schleife und splitte diese nun in den verschlüsselten Variablennamen und dem eingegebenen Wert auf ([2]).

Da ich ja obig skizzierten Aufbau mit der Überschrift der Rubrik und einem weiteren Array mit den eingegebenen Werten haben möchte, lege ich ein neues, temporärs Array an, das als erstes Element die Überschrift der Rubrik bekommt ([3]).

Ein zweites, ebenfalls nur temporär benötigtes Array soll nachfolgend mit den Formulardaten gefüllt werden.

Dazu durchlaufe ich das Array "Felder", das der Rubrik entspricht ([5]).

Kommt der aktuelle Variablenname im Array "Felder" mit der entsprechenden Rubrik vor ([6]), dann soll der eingegebene Wert dem zweiten temporären Array hinzugefügt werden ([7]).

Nach vollständigem Durchlaufen dieser Schleife wird das eben erzeugte, zweite temporäre Array als Element dem ersten temporären Array zugeordnet ([8]), das dann als ein einziges Element dem Array "Rubriken" zugeordnet wird ([9]).

Ist dieser Vorgang komplett abgeschlossen, dann müsste ich die gewünschte Array-Struktur, wie oben bereits beschrieben, haben.

Dies scheint aber nicht der Fall zu sein, da die Ausgabe nicht dem gewünschten Ergebnis entspricht, oder aber der nachfolgende Block ist fehlerhaft.

Jetzt durchlaufe ich das Array "Rubriken" ([10]).

Ich ziehe als erstes die Überschrift raus ([11]). Die Überschrift ist immer das erste Element der n-ten Rubrik.

Da die auf dieser Seite, je nach Rubrik, unterschiedliche Anordnungen der Formulardaten habe ("Vorname" und "Nachname", "Strasse" und "Nr", "Postleitzahl" und "Ort" bei der Rubrik "Versand, ansonsten gegebenenfalls untereinander), unterscheide ich jetzt nach der Rubrik ([12]).

Jetzt wird das zweite Array durchlaufen ([13]), das die Formularwerte enthält, und die Ausgabe entsprechend aufbereitet ([14]).

Die weiteren Javascript-Anweisungen können an dieser Stelle vernachlässigt werden.

Im Browser bekomme ich letztendlich folgende Ausgabe:

Versandadresse

ENRICO undefinedVersandadresse

MUSTERMANN undefinedVersandadresse

Versandadresse

MUSTER-WEG 12 undefinedVersandadresse

94469 undefinedVersandadresse

DEGGENDORF undefined

Was habe ich falsch gemacht?

Ansehen könnt ihr diese Seite hier: http://testdomain4.ch/WEBSHOP/SEITEN/___DatenstringZerlegen.html

Vielen lieben Dank für eure Unterstützung und Gruß,
Enrico

  1. Hallo,

    Dein Script ist nur »halb fertig«, du hast es für mehrere Rubriken angelegt, aber es wird letztlich nur eine extrahiert. Da müsstest du im oberen Teil auch mit verschachtelten Schleifen arbeiten, wenn du eine variable Anzahl von Rubriken unterstützen willst.

    So könnte die Behandlung *einer* Rubrik aussehen (ich hab’s mal sehr vereinfacht):

    var Variablenpaare = Formulardaten.split("&");  
    var RubrikDaten = new Array(Felder[Rubrik][0]);  
    for (var i = 0, l1 = Variablenpaare.length; i < l1; i++)  
    {  
       var VariableWert = Variablenpaare[i].split("=");  
       var Variable = VariableWert[0];  
       var Wert     = VariableWert[1];  
       for (var j = 1, l2 = Felder[Rubrik].length; j < l2; j++) {  
          if (Variable.indexOf(Felder[Rubrik][j]) !== -1) {  
             RubrikDaten.push(Wert);  
          }  
       }  
    }  
      
    var Ausgabe = "";  
    for (i = 1, l = RubrikDaten.length; i < l; i++) {  
       Ausgabe += RubrikDaten[i];  
       if (i < l - 1) {  
          Ausgabe += '<br>';  
       }  
    }  
    document.write(Ausgabe);
    

    Für mehrere Rubriken musst du den obigen Teil nun wiederholen – etwa mit einer Schleife, die eine Funktion aufruft.

    Davon abgesehen noch allgemeine Tipps:

    Dein Vorhaben sowie die konkrete Umsetzung scheinen mir problematisch. ROT13 ist keine ernsthafte Verschlüsselung und taugt höchstens zur simplen Verschleierung. Ich kann nicht ganz nachvollziehen, wieso diese Verarbeitung mit JavaScript erfolgen soll. Gut, dazu hast du auch nicht viel geschrieben.

    Jedenfalls rate ich dir, dich genauer mit JavaScript zu beschäftigen. Z.B. in dem du ein gutes Buch durcharbeitest. Dein Code und die Herangehensweise können nämlich an verschiedenen Stellen verbessert werden.

    Code sollte bestenfalls in wiederverwendbaren Funktionen strukturiert werden, welche lokale anstatt globale Variablen verwenden. Du verwendest überall globale Variablen ohne »var«. Variablen sollten auch mit Kleinbuchstaben beginnen, das ist eine sinnvolle Konvention, um sie von Konstruktoren zu unterscheiden.

    Neben Arrays gibt es in JavaScript noch andere Datenstrukturen, die sich besser eignen, um unter einem bestimmten Schlüssel (Objekteigenschaft) einen Wert zu speichern. Objekte können einfach mit dem Object-Literal {} erzeugt werden. Ein Beispiel:

    var rubriken = {};  
      
    var versand = {};  
    // Erzeuge Felder  
    versand.vorname = 'Enrico';  
    versand.nachname = 'Mustermann';  
    // Und so weiter, das kann programmatisch erfolgen  
      
    // Geht auch mit einem variablen Eigenschaftnamen:  
    var eigenschaft = 'plz';  
    versand[eigenschaft] = 12345;  
    // Dies hat eine plz-Eigenschaft angelegt  
      
    // Speichere versand-Objekt im rubriken-Objekt  
    rubriken.versand = versand;  
      
    // … weitere Objekte auf diese Weise erzeugen und zu rubriken hinzufügen …  
      
    var ausgabe = '';  
    // Durchlaufe Rubriken mit einer [ref:self812;javascript/sprache/schleifen.htm#for@title=for-in-Schleife]  
    for (var rubrikName in rubriken) {  
      ausgabe += '<h2>' + rubrikName + '</h2>';  
      // Durchlaufe Felder der Rubrik  
      var rubrik = rubriken[rubrikName];  
      for (var feldName in rubrik) {  
        ausgabe += '<p>' + feldName + ': ' + rubrik[feldName] + '</p>';  
      }  
    }  
    document.write(ausgabe);
    

    Solche Objektstrukturen eignen sich viel besser als verschachtelte Arrays.

    Parallel zum Object-Literal gibt es übrigens auch den Array-Literal:

    var array = [1, 2, 3];

    [] entspricht new Array(), allerdings ist es schneller, einfacher zu schreiben und eindeutig. new Array() erzeugt nämlich, wenn nur eine Zahl x übergeben wird, keinen Array mit x als Eintrag, sondern einen Array mit x undefined-Einträgen. [eintrag1, eintrag2, … eintragN] erzeugt immer einen Array mit eben jenen Einträgen.

    Grüße,
    Mathias

    1. Hallo Mathias,

      vielen herzlichen Dank für Deine sehr ausführliche Hilfe :-)

      Damit sollte die funktionierende Umsetzung meines Vorhabens kein Problem mehr darstellen.

      Gruß,
      Enrico

      Hallo,

      Dein Script ist nur »halb fertig«, du hast es für mehrere Rubriken angelegt, aber es wird letztlich nur eine extrahiert. Da müsstest du im oberen Teil auch mit verschachtelten Schleifen arbeiten, wenn du eine variable Anzahl von Rubriken unterstützen willst.

      So könnte die Behandlung *einer* Rubrik aussehen (ich hab’s mal sehr vereinfacht):

      var Variablenpaare = Formulardaten.split("&");

      var RubrikDaten = new Array(Felder[Rubrik][0]);
      for (var i = 0, l1 = Variablenpaare.length; i < l1; i++)
      {
         var VariableWert = Variablenpaare[i].split("=");
         var Variable = VariableWert[0];
         var Wert     = VariableWert[1];
         for (var j = 1, l2 = Felder[Rubrik].length; j < l2; j++) {
            if (Variable.indexOf(Felder[Rubrik][j]) !== -1) {
               RubrikDaten.push(Wert);
            }
         }
      }

      var Ausgabe = "";
      for (i = 1, l = RubrikDaten.length; i < l; i++) {
         Ausgabe += RubrikDaten[i];
         if (i < l - 1) {
            Ausgabe += '<br>';
         }
      }
      document.write(Ausgabe);

      
      >   
      > Für mehrere Rubriken musst du den obigen Teil nun wiederholen – etwa mit einer Schleife, die eine Funktion aufruft.  
      >   
      >   
      > Davon abgesehen noch allgemeine Tipps:  
      >   
      > Dein Vorhaben sowie die konkrete Umsetzung scheinen mir problematisch. ROT13 ist keine ernsthafte Verschlüsselung und taugt höchstens zur simplen Verschleierung. Ich kann nicht ganz nachvollziehen, wieso diese Verarbeitung mit JavaScript erfolgen soll. Gut, dazu hast du auch nicht viel geschrieben.  
      >   
      > Jedenfalls rate ich dir, dich genauer mit JavaScript zu beschäftigen. Z.B. in dem du ein gutes Buch durcharbeitest. Dein Code und die Herangehensweise können nämlich an verschiedenen Stellen verbessert werden.  
      >   
      > Code sollte bestenfalls in wiederverwendbaren Funktionen strukturiert werden, welche lokale anstatt globale Variablen verwenden. Du verwendest überall globale Variablen ohne »var«. Variablen sollten auch mit Kleinbuchstaben beginnen, das ist eine sinnvolle Konvention, um sie von Konstruktoren zu unterscheiden.  
      >   
      > Neben Arrays gibt es in JavaScript noch andere Datenstrukturen, die sich besser eignen, um unter einem bestimmten Schlüssel (Objekteigenschaft) einen Wert zu speichern. Objekte können einfach mit dem [Object-Literal](http://aktuell.de.selfhtml.org/artikel/javascript/organisation/#object-literale) `{…}`{:.language-javascript} erzeugt werden. Ein Beispiel:  
      >   
      > ~~~javascript
      
      var rubriken = {};  
      
      >   
      > var versand = {};  
      > // Erzeuge Felder  
      > versand.vorname = 'Enrico';  
      > versand.nachname = 'Mustermann';  
      > // Und so weiter, das kann programmatisch erfolgen  
      >   
      > // Geht auch mit einem variablen Eigenschaftnamen:  
      > var eigenschaft = 'plz';  
      > versand[eigenschaft] = 12345;  
      > // Dies hat eine plz-Eigenschaft angelegt  
      >   
      > // Speichere versand-Objekt im rubriken-Objekt  
      > rubriken.versand = versand;  
      >   
      > // … weitere Objekte auf diese Weise erzeugen und zu rubriken hinzufügen …  
      >   
      > var ausgabe = '';  
      > // Durchlaufe Rubriken mit einer [ref:self812;javascript/sprache/schleifen.htm#for@title=for-in-Schleife]  
      > for (var rubrikName in rubriken) {  
      >   ausgabe += '<h2>' + rubrikName + '</h2>';  
      >   // Durchlaufe Felder der Rubrik  
      >   var rubrik = rubriken[rubrikName];  
      >   for (var feldName in rubrik) {  
      >     ausgabe += '<p>' + feldName + ': ' + rubrik[feldName] + '</p>';  
      >   }  
      > }  
      > document.write(ausgabe);
      
      

      Solche Objektstrukturen eignen sich viel besser als verschachtelte Arrays.

      Parallel zum Object-Literal gibt es übrigens auch den Array-Literal:

      var array = [1, 2, 3];

      [] entspricht new Array(), allerdings ist es schneller, einfacher zu schreiben und eindeutig. new Array() erzeugt nämlich, wenn nur eine Zahl x übergeben wird, keinen Array mit x als Eintrag, sondern einen Array mit x undefined-Einträgen. [eintrag1, eintrag2, … eintragN] erzeugt immer einen Array mit eben jenen Einträgen.

      Grüße,
      Mathias