HTML-Tabelle mit Firebase-Datenbankdaten füllen

Question

Ich verwende Firebase, um eine einfache E-Commerce-Website zu erstellen, und habe ein Problem festgestellt. Für das Backend versuche ich eine HTML-Tabelle mit Firebase-Datenbankdaten zu füllen.

Derzeit werden die Daten angezeigt und ich kann den Hauptteil der Tabelle auffüllen, aber gleichzeitig möchte ich die Header für die Tabelle mit dem gleichen Snapshot erstellen. Ich konnte dies tun, aber es wiederholt sich für jeden Datensatz in der Datenbank. Zwei Datensätze haben also zwei Header.

Wie kann ich einfach den Index des Snapshots abfangen und nur die createHeaders Funktion einmal vervollständigen, oder gibt es eine effizientere Möglichkeit, dies zu tun. Unten ist die JS ich verwende:

itemsRef.on('value', function(snapshot) { 
    snapshot.forEach(function(child) { 
     createHeaders(child.val()); 
     showItems(child.val(), child.key); 
    }); 
}); 

function createHeaders(data) { 
    var html = ''; 
    html += '<tr>'; 
    $.each(data, function(key, value) { 
     html += '<th>' + key + '</th>'; 
    }); 
    html += '<th class="text-right">'; 
    html += '</tr>'; 

    $("#tableHeaders").append(html); 
} 

function showItems(data, key) { 
    var html = ''; 
    html += '<tr>'; 
    $.each(data, function(key, value) { 
     html += '<td>' + value + '</td>'; 
    }); 
    html += '<td class="text-right"><a href="/" class="btn btn-primary btn-sm"><i class="fa fa-pencil"></i> Edit</a> <a href="/" class="btn btn-danger btn-sm"><i class="fa fa-times"></i> Delete</a></td>'; 
    html += '</tr>'; 

    $('#results').append(html); 
} 

Answer 1

snapshot.forEach(function(child) { 
    createHeaders(child.val()); 
    showItems(child.val(), child.key); 
}); 

Die .forEach Funktion nur das tut, was es sagt: Es wird einmal in der Datenbank auf dem aktuellen Referenzpunkt für jedes Element ausgeführt werden.

Da Sie jedes Mal, wenn ein Datenelement geladen wird, createHeaders() aufrufen, werden die Header jedes Mal neu erstellt.

Was könnten Sie tun, ist eine einfache isFirst boolean erstellen, und wie die forEach um ausgeführt wird (ich nehme Ihre Spaltenüberschriften sind das erste, was zu zurückgegeben.) Dann alles, was Sie brauchen würde, so etwas wie dieses:

snapshot.forEach(function(child) { 
    if(isFirst){ 
     createHeaders(child.val()); 
     isFirst = false; //So it only will run once. 
    } 

    showItems(child.val(), child.key); 
}); 

(Sie könnten einen else{} in auch dort verwenden müssen, ich habe nicht tauchen zu tief in den Code.)