javascript - 由于 Fire Base 中有 12 个字符串，因此表格重复 12 次

Question

当检索火力基地数据时，html 表会重复其自身 12 个表，这是因为有 12 个字符串。

我在下面添加了图片，显示 json 列表和我的代码以及发生的情况。

Json File

Table Repeating

Data Structure

database.ref().child(dv).once('值', 函数(快照){

    if(snapshot.exists()){

        var content = '';

        snapshot.forEach(function(data){

            var val = snapshot.val();

            content +='<tr>';

            content += '<tr class="prytimrh"> <th rowspan="8" bgcolor="#4da6ff">' + val.d_date + '</th> <th> Prayer </th>   <th> Start </th> <th> Jammat </th> </tr>';

            content += '<tr class="prytimr1"> <th>Fajr:</th> <td>' + val.fajr_begins + '</td>'; content               += '<td>' + val.fajr_jamah + '</td> </tr>';

            content += '<tr class="prytimr2"> <th>Sunrise:</th> <td>'           + val.sunrise + '</td>'; content                 += '<td>' + val.sunrise + '</td> </tr>';

            content += '<tr class="prytimr1"> <th>Zuhur:</th> <td>'              + val.zuhr_begins + '</td>'; content                    += '<td>' + val.zuhr_jamah + '</td> </tr>';

            content += '<tr class="prytimr2"> <th>Asr:</th> <td>'           + val.asr_mithl + '</td>'; content                    += '<td>' + val.asr_jamah + '</td> </tr>';

            content += '<tr class="prytimr1"> <th>Margrib</th> <td>'               + val.maghrib_begins + '</td>'; content                      += '<td>' + val.maghrib_jamah+ '</td> </tr>';

            content += '<tr class="prytimr2"> <th>Isha</th> <td>'               + val.isha_begins + '</td>'; content              += '<td>' + val.isha_jamah + '</td> </tr>';

            content += '<tr class="prytimr1"> <th>Jummah</th> <td>'                + val.type_prayer_start + '</td>'; content                    += '<td>' + val.type_prayer_jamah +  '</td> </tr>';

            content += '</tr>';
        });
        $('#djprayer').append(content);
    }
});

Answer 1

您应该注意到that :

The listener receives a snapshot that contains the data at the specified location in the database at the time of the event. You can retrieve the data in the snapshot with the val() method.

您应该首先使用 val() 方法检索数据，然后循环 snapshot.val() 而不是 snapshot 对象。

database.ref().child(dv).once('value', function(snapshot){

    if(snapshot.exists()){

        var models = snapshot.val();

        var content = '';

        models.forEach(function (model) {

            var val = model;

            content +='<tr>';

            content += '<tr class="prytimrh"> <th rowspan="8" bgcolor="#4da6ff">' + val.d_date + '</th> <th> Prayer </th>   <th> Start </th> <th> Jammat </th> </tr>';

            content += '<tr class="prytimr1"> <th>Fajr:</th> <td>' + val.fajr_begins + '</td>'; content               += '<td>' + val.fajr_jamah + '</td> </tr>';

            content += '<tr class="prytimr2"> <th>Sunrise:</th> <td>'           + val.sunrise + '</td>'; content                 += '<td>' + val.sunrise + '</td> </tr>';

            content += '<tr class="prytimr1"> <th>Zuhur:</th> <td>'              + val.zuhr_begins + '</td>'; content                    += '<td>' + val.zuhr_jamah + '</td> </tr>';

            content += '<tr class="prytimr2"> <th>Asr:</th> <td>'           + val.asr_mithl + '</td>'; content                    += '<td>' + val.asr_jamah + '</td> </tr>';

            content += '<tr class="prytimr1"> <th>Margrib</th> <td>'               + val.maghrib_begins + '</td>'; content                      += '<td>' + val.maghrib_jamah+ '</td> </tr>';

            content += '<tr class="prytimr2"> <th>Isha</th> <td>'               + val.isha_begins + '</td>'; content              += '<td>' + val.isha_jamah + '</td> </tr>';

            content += '<tr class="prytimr1"> <th>Jummah</th> <td>'                + val.type_prayer_start + '</td>'; content                    += '<td>' + val.type_prayer_jamah +  '</td> </tr>';

            content += '</tr>';

        });

        $('#djprayer').append(content);
    }
});