Javascript Firebase-Datenbank erhalten Werte gruppiert

Question

Ich brauche diese Werte in einer Zeile, aber ich will sie nicht antworten, wenn es bereits in Div.

Mein Versuch ist hier. Ich versuche, ein Array zu erstellen und diese Werte von Firebase hier zu setzen, aber ich kann immer noch nicht in HTML sehen.

var fruits = []; 
    var fetchPostsleft = function(postsRef, sectionElement,fruits) { 
    postsRef .orderByChild('timeStamp').on('child_added', function(data) { 
     console.log(data.val()); 
     var author = data.val().senderName; 


     var containerElement2 = sectionElement.getElementsByClassName('posts-containerleft')[0]; 

     fruits.push(data.val().senderName); 
     console.log(fruits.length); 


    }); 

    }; 


    fetchPostsleft(topUserPostsRef, topUserPostsSectionleft,fruits); 
var fLen = fruits.length; 
     console.log(fruits.length); 

for (var i = 0; i < fLen; i++) { 
    // text += "<li>" + fruits[i] + "</li>"; 
    topUserPostsSectionleft.getElementsByClassName('posts-containerleft')[0].insertBefore(createheaders(fruits[i], ""), 
    topUserPostsSectionleft.getElementsByClassName('posts-containerleft')[0].firstChild); 
} 

Answer 1

Die Daten werden asynchron aus Firebase geladen. Dies bedeutet, dass bis zum Zeitpunkt, zu dem Sie das Array durchlaufen haben, es noch nicht gefüllt wurde. Am einfachsten ist es, dies zu sehen von den meisten Code mit ein paar Log-Anweisungen ersetzt:

console.log("Before query"); 
postsRef.orderByChild('timeStamp').on('child_added', function(data) { 
    console.log("In child_added"); 
}); 
console.log("After query"); 

Wenn Sie diese Schnipsel ausführen, wird das Logging sein:

Bevor Abfrage

Nach Abfrage

In child_added

Diese prob ist Wahrscheinlich nicht die Reihenfolge, die Sie erwartet haben, da sie sich von der Reihenfolge der Protokollanweisungen in Ihrem Code unterscheidet. Dies liegt daran, dass die Daten asynchron aus Firebase geladen werden und der Rest des Codes während des Ladens fortgesetzt wird.

Es ist etwas leichter zu sehen, wenn Sie den Rückruf in eine separate Funktion drehen:

function onChildAdded(data) { 
    console.log("In child_added"); 
}); 

console.log("Before query"); 
postsRef.orderByChild('timeStamp').on('child_added', onChildAdded); 
console.log("After query"); 

Jetzt können Sie leichter erkennen, dass die ersten paar Zeilen nur erklären die onChildAdded Funktion. Sie laufen es noch nicht. Und wir übergeben gerade diese Funktion in an die Abfrage, so dass die Abfrage onChildAdded aufrufen kann, wann immer es die Daten bekommt.

Dies ist die häufigste Fallstricke der Web-Programmierung mit Remote-Servern. Da das moderne Web jedoch auf solchen asynchronen APIs basiert, müssen Sie es lernen.

Ein Weg, den ich gefunden habe, funktioniert, um Ihr Problem neu zu gestalten. Ihr aktueller Code basiert darauf, "zuerst die Posts abzurufen und dann zum HTML hinzuzufügen". Aber bei der asynchronen Programmierung ist es besser zu denken "fange die Beiträge an. Wenn wir sie bekommen, füge sie zum HTML hinzu". Dies schlägt sich in den folgenden Code:

function fetchPostsleft(postsRef, sectionElement) { 
    postsRef.orderByChild('timeStamp').on('child_added', function(data) { 
    var author = data.val().senderName; 
    topUserPostsSectionleft.getElementsByClassName('posts-containerleft')[0].insertBefore(createheaders(author, ""), 
    }); 
}; 

fetchPostsleft(topUserPostsRef, topUserPostsSectionleft); 

Jetzt ist der gesamte Code, der die neuen Daten benötigt, ist innerhalb der Rückruf, so ist es nur ausgeführt, wenn der Snapshot tatsächlich verfügbar ist.