Problem Zugriff auf JSON-Daten in einer Javascript-Funktion innerhalb einer Express/Jade-Vorlage

Question

Ich bin irgendwie neu bei Express/Jade, also entschuldigt, wenn das eine dumme Frage ist.

Ich übergebe JSON-Daten in einer Jade-Vorlage, aber obwohl die Daten definitiv da sind und woanders auf der Seite verwendbar sind, kann ich nicht scheinen, in einer Javascript-Funktion auf derselben Seite darauf zuzugreifen.

Der betreffende Code sieht wie folgt aus:

script. 
    function populateData(value){ 
     console.log("Value = " + value); 
     for(i = 0;i <= 3;i++){ 
      console.log("i = " + i); 
      if(value==i){ 
       console.log("school = " + mydata.sclist[i].sName); 
       $('#input_sid').val(mydata.sclist[i].sID); 
       $('#input_spc').val(mydata.sclist[i].sPostcode); 
      } 
     } 
    } 
form#form_add_booking(name="addbooking",method="post",action="/addbooking") 
    table.formtable 
     tr 
      td 
       span 
        b School Name 
      td 
       select#input_sname(name="sname" onChange="populateData(this.value)") 
        option. 
         ====== select ====== 
        each school, i in mydata.sclist 
         option(value=i). 
          #{school.sName} 

im obigen Code So wird die SELECT-Liste korrekt aus der JSON mit Schulnamen gefüllt, aber, wenn das onChange Attribut die Javascript-Funktion ausgelöst, I bekomme ein 'Uncaught ReferenceError' das 'mydata' nicht definiert ist.

Was fehlt mir bitte?

Answer 1

Ich gehe davon aus, mydata wird beim Rendern der Seite an Jade übergeben. Die Seite wird dann als gerenderter HTML-Code vom Server an den Client (Webbrowser) zurückgegeben. Sie können dann nicht auf die Variable mydata zugreifen, da sie nur auf der Serverseite zum Rendern der Seite verwendet wird. (Wählen wird auf der Serve-Seite gerendert)

Um auf die Daten zugreifen zu können wie Sie wollen, müssen Sie Javascript Variable zusätzlich zu Ihrem Code oben rendern, die dann auf dem Client verwendet werden kann- Seite. (Wenn das Auswahl geändert wird)

const clientSideData = !{(JSON.stringify(mydata))}; 

Platz dies ganz oben populateData (es wandelt JSON Objekt string) und dann mydata Referenzen in der Funktion mit clientSideData ersetzen. Auf diese Weise haben Sie auch von clientseitig Zugriff auf die Daten, da Sie die JavaScript-Variable rendern.