12 串火基地台重复 12 次

Question

在检索火基础数据时，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);
    }
});