Javascript Array zeigt in der Konsole, aber ich kann keine Eigenschaften in Loops

Question

zugreifen Ich versuche wirklich mein verdammt nicht zu fragen, aber ich muss an dieser Stelle, bevor ich meine Haare reißen.

Zu der Zeit, die der js-Interpreter zu dieser bestimmten Methode gelangt, kann ich es auf die Konsole kein Problem drucken, es ist ein Array von "Ereignis" -Objekten. Von FireBug kann ich es sehen, aber wenn ich versuche, eine Schleife einzustellen, um irgendetwas mit diesem Array zu machen, ist es, als ob es nicht existiert. Ich bin absolut ratlos ......

ein paar Dinge:

ich ein Neuling bin, habe ich eine for(var index in list) Schleife versucht haben, ohne Erfolg, habe ich versucht, auch eine regelmäßige alte for(var i = 0; i < listIn.length; i++), und ich auch versucht, die Größe der lokalen Variablen zu erhalten, indem Sie var size = listIn.length setzen.

Sobald ich versuche, es zu durchlaufen, bekomme ich nichts, aber ich kann auf alle Objekte darin von der FireBug-Konsole kein Problem zugreifen. Bitte helfen Sie mir, auch wenn Sie mir nur einen kleinen Hinweis geben, wo ich hinschauen sollte, wäre großartig.

Was das Array selbst, ich habe keine Probleme mit einer Reihe bekommen von PHP zurück in Form von: [{"Event_Id":"9", "Title":"none"}, etc etc ]

Hier ist mein Code von meinem Haupt-Launcher JavaScript-Datei. Ich werde auch ein Beispiel der JSON-Daten veröffentlichen, die zurückgegeben werden. Ich befürchte, dass ich mich überanstrenge, indem ich an erster Stelle ein massives Objekt namens content erstelle, das Eigenschaften wie DOM-Strings, Einstellungen und allgemeine Methoden enthalten soll, aber bis jetzt funktioniert alles andere.

Die init() Funktion aufgerufen wird, wenn der Körper onload auf der entsprechenden HTML-Seite aufgerufen wird, und während des Gesprächs zu setAllEvents und setEventNavigation bin ich verloren.

Und nur hinzuzufügen, ich versuche, JavaScript Grundlagen zu lernen, bevor ich jQuery jemals berühren.

Dank

var dom, S, M, currentArray, buttonArray, typesArray, topicsArray; 

content = { 
    domElements: {}, 

    settings: { 
     allContent: {}, 
     urlList: { 
      allURL: "../PHP/getEventsListView.php", 
      typesURL: "../PHP/getTypes.php", 
      topicsURL: "../PHP/getTopics.php" 
     }, 
     eventObjArray: [], 
     buttonObjArray: [], 
     eventTypesArray: [], 
     eventTopicsArray: [] 
    }, 

    methods: { 
     allCallBack: function (j) { 
      S.allContent = JSON.parse(j); 
      var list = S.allContent; 
      for (var index in list) { 
       var event = new Event(list[index]); 
       S.eventObjArray.push(event); 
      } 
     }, 
     topicsCallBack: function(j) { 
      S.eventTopicsArray = j; 
      var list = JSON.parse(S.eventTopicsArray); 
      topicsArray = list; 
      M.populateTopicsDropDown(list); 
     }, 
     typesCallBack: function(j) { 
      S.eventTypesArray = j; 
      var list = JSON.parse(S.eventTypesArray); 
      typesArray = list; 
      M.populateTypesDropDown(list); 
     }, 
     ajax: function (url, callback) { 
      getAjax(url, callback); 
     }, 
     testList: function (listIn) { 
      // test method 
     }, 
     setAllEvents: function (listIn) { 
      // HERE IS THE PROBLEM WITH THIS ARRAY 
      console.log("shall we?"); 
      for(var index in listIn) { 
       console.log(listIn[index]); 
      } 
     }, 
     getAllEvents: function() { 
      return currentArray; 
     }, 
     setAllButtons: function (listIn) { 
      buttonArray = listIn; 
     }, 
     getAllButtons: function() { 
      return buttonArray; 
     }, 
     setEventNavigation: function(current) { 
      // SAME ISSUE AS ABOVE 
      var l = current.length; 
      //console.log("length " + l); 
      var counter = 0; 
      var endIndex = l - 1; 
      if (current.length < 4) { 
       switch (l) { 
        case 2: 
         var first = current[0]; 
         var second = current[1]; 
         first.setNextEvent(second); 
         second.setPreviousEvent(first); 
         break; 
        case 3: 
         var first = current[0]; 
         var second = current[1]; 
         var third = current[2]; 
         first.setNextEvent(second); 
         second.setPreviousEvent(first); 
         second.setNextEvent(third); 
         third.setPreviousEvent(second); 
         break; 
        default: 
         break; 
       } 
      } else { 
       // do something 
      } 
     }, 
     populateTopicsDropDown: function(listTopics) { 
      //console.log("inside topics drop"); 
      //console.log(listTopics); 
      var topicsDropDown = document.getElementById("eventTopicListBox"); 
      for(var index in listTopics) { 
       var op = document.createElement("option"); 
       op.setAttribute("id", "dd" + index); 
       op.innerHTML = listTopics[index].Main_Topic; 
       topicsDropDown.appendChild(op); 
      } 
     }, 
     populateTypesDropDown: function(listTypes) { 
      //console.log("inside types drodown"); 
      //console.log(listTypes); 
      var typesDropDown = document.getElementById("eventTypeListBox"); 
      for(var index2 in listTypes) { 
       var op2 = document.createElement("option"); 
       op2.setAttribute("id", "dd2" + index2); 
       op2.innerHTML = listTypes[index2].Main_Type; 
       typesDropDown.appendChild(op2); 
      } 
     } 
    }, 
    init: function() { 
     dom = this.domElements; 
     S = this.settings; 
     M = this.methods; 
     currentArray = S.eventObjArray; 
     buttonArray = S.buttonObjArray; 
     topicsArray = S.eventTopicsArray; 
     typesArray = S.eventTypesArray; 
     M.ajax(S.urlList.allURL, M.allCallBack); 
     //var tempList = currentArray; 
     //console.log("temp array length: " + tempList.length); 
     M.setAllEvents(currentArray); 
     M.testList(currentArray); 
     M.setEventNavigation(currentArray); 
     //M.setEventNavigation(); 
     M.ajax(S.urlList.topicsURL, M.topicsCallBack); 
     M.ajax(S.urlList.typesURL, M.typesCallBack); 
    } 
}; 

Answer 1

Das Problem, das Sie haben, ist, dass currentArray asynchron sein Wert wird, was bedeutet, dass Sie setAllEvents zu früh anrufen. In diesem Moment wurde die allCallBack Funktion noch nicht ausgeführt. Dies geschieht erst, nachdem der aktuelle Ausführungscode abgeschlossen wurde (bis der Aufrufstapel zu empty wird), und die Anforderung ajax löst den Rückruf aus.

So sollten Sie setAllEvents anrufen und alle anderen Code, der nur von currentArray abhängt, wenn der Ajax-Aufruf abgeschlossen ist.

Hinweis: Der Grund, dass es in der Konsole funktioniert, ist, dass der Ajax-Aufruf die Antwort bereits zurückgegeben hat, wenn Sie den Wert von der Konsole anfordern.

Ohne auf den Rest des Codes angesehen haben, und alle anderen Probleme, die es haben könnte, löst dies das Problem Sie haben:

init: function() { 
    dom = this.domElements; 
    S = this.settings; 
    M = this.methods; 
    currentArray = S.eventObjArray; 
    buttonArray = S.buttonObjArray; 
    topicsArray = S.eventTopicsArray; 
    typesArray = S.eventTypesArray; 
    M.ajax(S.urlList.allURL, function (j) { 
     // Note that all the rest of the code is moved in this call back 
     // function, so that it only executes when the Ajax response is 
     // available: 
     M.allCallBack(j); 
     //var tempList = currentArray; 
     //console.log("temp array length: " + tempList.length); 
     M.setAllEvents(currentArray); 
     M.testList(currentArray); 
     M.setEventNavigation(currentArray); 
     //M.setEventNavigation(); 
     // Note that you will need to take care with the following asynchronous 
     // calls as well: their effect is only available when the Ajax 
     // callback is triggered: 
     M.ajax(S.urlList.topicsURL, M.topicsCallBack); // 
     M.ajax(S.urlList.typesURL, M.typesCallBack); 
    }); 
}