由于火灾基地有12根弦，表重复12次

Question

当检索fire base数据时，html表重复其自己的12个表，这是因为有12个字符串。

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

Json File

Table Repeating

Data Structure

database.ref（）。child（dv）.once（'value'，function（snapshot）{

    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：

侦听器接收快照，该快照包含事件发生时数据库中指定位置的数据。您可以使用val（）方法检索快照中的数据。

您应首先使用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);
    }
});