HTMLテーブルにFirebaseデータベースデータを埋め込む

Question

現在、Firebaseを使用して簡単な電子商取引Webサイトを構築しており、問題が発生しています。バックエンドの場合、私はFirebaseデータベースのデータをHTMLテーブルに移そうとしています。

現在、データが表示されていますが、テーブルの本体にデータを取り込めますが、同時に同じスナップショットを使用してテーブルのヘッダーを作成したいとします。私はこれを行うことができましたが、それはデータベース内のすべてのレコードに対して繰り返されます。したがって、2つのレコードには2つのヘッダーがあります。

私は単にスナップショットのインデックスをキャッチし、createHeaders関数を1回だけ完了するか、これを行うより効率的な方法があります。以下は、私が使用していますJS次のとおりです。

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); 
}); 

.forEach機能は、それが言うだけで何が行われます。これは、現在の基準位置でのデータベース内の各要素に対して一度実行されます。

データがロードされるたびにcreateHeaders()を呼び出すため、毎回ヘッダーも再作成されます。あなたは何ができるか

は、単純なisFirstブール値を作成し、forEachは（私はあなたの列ヘッダが返される最初のものですと仮定します。）の順序で実行されるよう、あなたが必要となる全てがこのようなものです：

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

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

（あなたは私がコードにあまりにも深く掘り下げていなかった、としてもそこにelse{}を使用する必要があります。）