JSON Multidimensionales Array ausgeben

F

Fragenfrager

Erfahrenes Mitglied
Hallo liebes Forum,

ich habe in php ein multidimensionales Array aus einer Datenbank gezogen.
Aufbau:
Code: 
Array
(
  [0] => Array
  (
  )
  [2] => Array
  (
    [10] => Haus 18
    [9] => Haus 6
   )
  [1] => Array
  (
   [4] => Haus13
   [3] => Haus18
   [2] => Haus4
   [1] => Haus5
   [6] => Haus7
   [5] => Haus9
)
Diese wurde mit json_encode() umgewandelt und hat somit folgenden Aufbau:
Code: 
{
"0":[],
"2":{"10":"Haus 18","9":"Haus 6"},
"1":{"4":"Haus13 ","3":"Haus18","2":"Haus4","1":"Haus5","6":"Haus7","5":"Haus9"}
}
Ziel ist es, aus diesem Array eine HTML-SELECT-OPTION zu erstellen. Eine Variable "gelaende" liefert mir dabei die Information, ob 0,1 oder 2 im ersten Arrayelement gefragt sind.
Ich benötige nun etwas wie:
Code: 
while (größe erstes Arrayelement)
{
  wenn(erstesArrayelement(key)=='gelaende')
 {
  while (größe zweites Arrayelement)
  {
  
  NeueOption = new Option(document.form.neu.[ArrayElement2[key], document.form.neu.[ArrayElement2[value);
  document.Testform.Auswahl.options[document.form.Auswahl.length] = NeueOption;
  }
 }
}
Der "dreckige" Code ist mir soweit bekannt, ich scheitere aber mangels Erfahrung an der praktischen Umsetzung
 
Hi,

so oft ich mir deinen Beitrag durchlesen, ich weiss nicht, was du möchtest!

Vielleicht hilft es, wenn du die "Html-Select-Option" skizzierst, die aus obigem JSON-Objekt entstehen soll.

Ciao
Quaese
 
Okay, ich versuche es mal.
Das oben beschriebene Array bleibt. Zudem die erwähnte Variable "gelaende", die eine if-Bedingung steuert:
IF gelaende=='2', dann sollen folgende Optionen entstehen:
HTML: 
<Option value='10'>Haus 18</Option>
<Option value='9'>Haus 6</Option>
Bei gelaende=='1' soll entstehen:
HTML: 
<Option value='4'>Haus 13</Option>
<Option value='3'>Haus 18</Option>
<Option value='2'>Haus 4</Option>
// ... usw.
 
Javascript: 
function buildOptionHtml(object) {
  var str = "";
  // Alternativ zu for ... in könntest du auch über Object.keys(object) iterieren
  for (var attr in object) {
    if (!object.hasOwnProperty(attr)) {
      continue;
    }

    // Bilde <option> HTML String
    // Alternativ kannst du mit DOM-Objekten arbeiten
    // Am besten erachte ich aber Templates
  }
}

var gelaende = /* ... */;
var json = /* ... */;
buildOptionHtml(json[gelaende].length);

Beachte allerdings, dass es keine Garantie bezüglich der Reihenfolge von Haus 18, 6 bzw. 13, 18, 4 (und weitere) gibt. Das Problem ist, dass du kein Array in deiner Datenstruktur verwendet hast, sondern Key-Value-Maps (oder Dictionaries, Hash Maps, ...). Solche Datenstrukturen garantieren keine Reihenfolge.
 
Vielen Dank @ComFreek,
ich glaube ich verstehe den Ansatz, benötige in der praktischen ausführen noch etwas Hilfe.
Ich habe meinen PHP/HTML-Code
PHP: 
  echo "\n\t\t\t\t<select name='erg_gelaende' id='erg_gelaende' size='1' onchange='pushToGebaeude($j_gelaendearray)' >";
$j_gelaendearray ist dabei das in Posting #1 angegebene JSON-Array.
Dieses soll nach pushToGebaeude übergeben werden. Dort setzt dann Dein Code an:
Code: 
function pushToGebaeude(json)     // in json sollte das JSON-Array übergeben worden sein
{
  function buildOptionHtml(object)
  {
  var str = "";
  for (var attr in object)
  {
     if (!object.hasOwnProperty(attr))
     {
       continue;
     }
     // Options erstellen und an document.drucker_input.erg_gebaeude übergeben
     NeuerEintrag = new Option(attr, attr, false, true);                     // Hier ist mein Problem: Wie komme ich genau an value und text aus dem JSONArray?
     document.drucker_input.erg_gebaeude.options[document.drucker_input.erg_gebaeude.length] = NeuerEintrag;
  }
  // ermitteln der GelaendeID
  for (i = 0; i < document.drucker_input.erg_gelaende.length; ++i)  // Alle SELECT-Einträge durchgehen und
  if (document.drucker_input.erg_gelaende.options.selected == true)  // prüfen, ob dieser gerade ausgewählt ist.
  {
      var gelaendeid=document.drucker_input.erg_gelaende.options.value;  // Wenn ja, den Value-Wert nach GelaendeID schreiben.
  }
     buildOptionHtml(json[gelaendeid].length);
  }  // end function buildOptionHtml
}  // end fuction pushToGebauede
Einen Fehler erhalte ich nicht, leider auch keine <Option>'s
 
Ich kann meinen Beitrag nicht editieren?! Daher hier der aktuelle Java-Code nochmal, da die Ermittlung der gelaendeID zu hoch gerutscht war
Code: 
function pushToGebaeude(json)     // in json sollte das JSON-Array übergeben worden sein
{
  function buildOptionHtml(object)
  {
  var str = "";
  for (var attr in object)
  {
     if (!object.hasOwnProperty(attr))
     {       continue;
     }
     // Options erstellen und an document.drucker_input.erg_gebaeude übergeben
     NeuerEintrag = new Option(attr, attr, false, true);                     // Hier ist mein Problem: Wie komme ich genau an value und text aus dem JSONArray?
     document.drucker_input.erg_gebaeude.options[document.drucker_input.erg_gebaeude.length] = NeuerEintrag;
  }
 
  }  // end function buildOptionHtml

// ermitteln der GelaendeID
  for (i = 0; i < document.drucker_input.erg_gelaende.length; ++i)  // Alle SELECT-Einträge durchgehen und
  if (document.drucker_input.erg_gelaende.options.selected == true)  // prüfen, ob dieser gerade ausgewählt ist.
  {
      var gelaendeid=document.drucker_input.erg_gelaende.options.value;  // Wenn ja, den Value-Wert nach GelaendeID schreiben.
  }
     buildOptionHtml(json[gelaendeid].length);

}  // end fuction pushToGebauede
 
Hallo Fragenfrager,

erst einmal ist das kein Java-Code. Es ist JavaScript ;) Das sind zwei ganz unterschiedliche Plattformen und Programmierumgebungen.

Zu deinem Code:

Wieso übergibst du buildOptionHtml die Länge eines jeweiligen Geländes (json[gelaendeid].length)? So kommst du nie mehr an das originale Objekt, außer wenn du auf den Funktionsparameter json zugreifst. Dies ist aber nur in diesem Fall möglich, da du die Funktionen verschachtelt hast.

Ich habe gerade bemerkt, dass ich diese Codezeile in meinem Code geschrieben hatte. Das tut mir leid, ich habe den Fehler im unteren Code ausgemerzt.

Ändere deinen Code so ab:
Javascript: 
function pushToGebaeude(json) // in json sollte das JSON-Array übergeben worden sein
{
    function buildOptionHtml(gelaende) {
        var str = "";
        for (var hausNummer in gelaende) {
            if (!gelaende.hasOwnProperty(attr)) {
                continue;
            }

            // Options erstellen und an document.drucker_input.erg_gebaeude übergeben
            NeuerEintrag = new Option(hausNummer, hausNummer, false, true);
            // appendChild() ist viel einfacher!
            document.drucker_input.erg_gebaeude.appendChild(NeuerEintrag);
        }
    } // end function buildOptionHtml

    // ermitteln der GelaendeID
    for (i = 0; i < document.drucker_input.erg_gelaende.length; ++i) // Alle SELECT-Einträge durchgehen und
    {
        if (document.drucker_input.erg_gelaende.options.selected == true) // prüfen, ob dieser gerade ausgewählt ist.
        {
            var gelaendeid = document.drucker_input.erg_gelaende.options.value; // Wenn ja, den Value-Wert nach GelaendeID schreiben.
        }
    }

    buildOptionHtml(json[gelaendeid]);
} // end fuction pushToGebauede
 
Hallo ComFreek,

vielen Dank bis hierhin. Die Tiefen von JavaScript erschließen sich mir so langsam. Wirklich langsam. (Ja, ich kennen den Unterschied zwischen Java und Javascript, da war ich oben wohl nur etwas schreibfaul)
Leider wird bei mir keine Option erzeugt, wenn ich Dein appendChild verwende.
Mit meinem
Code: 
document.drucker_input.erg_gebaeude.options[document.drucker_input.erg_gebaeude.length] = NeuerEintrag;
wird zumindest ein neues Option erzeugt. Jetzt gibt es nurnoch ein Problem: Den neuen Option-Eintrag erstellen wir mit
Code: 
NeuerEintrag = new Option(hausNummer, hausNummer, false, true);
Damit habe ich zweimal den Key des Arrays in den Daten. Diesen ermittelst Du über var hausNummer in gelaende , richtig?
Wie kann ich aus der Variablen gelaende noch den Value ziehen? Das JSON enthält unter anderem:
"2":{"10":"Haus 18","9":"Haus 6"}, mit dem bisherigen Code erhalte ich bei gelaendeid=2 : <Option value='10'>10</Option>, ich hätte gerne <Option value='10'>Haus 18</Option>
 
Hah! Ich konnte es lösen.
Code: 
NeuerEintrag = new Option(gelaende[Hausnummer ], Hausnummer, false, true);
So langsam fängt JS an, mit Spaß zu machen :)
 
Genau so ist es.
Bei einer Schleife des Typs for (var attr in obj) werden in attr die Schlüssel (Attributnamen) gespeichert. obj[attr] ist folglich der eigentliche Wert.

Dein Beitrag klingt so, als würde alles funktionieren. Funktioniert das appendChild() also nun?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück