I am attempting to populate the HTML table below with data from a JSON file:
When I set var i = "0";, I receive undefined, but changing it to var i = "dv"; results in nothing being displayed.
I am uncertain of the error I am making and what is causing this problem. I suspect it might be related to this line
for (var i = "dv"; i < data.length; i++) {Here is the code and the JSON file: https://pastebin.com/embed_js/rhUz1U5r
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
var currentTime = new Date()
var month = currentTime.getMonth()
var day = currentTime.getDate()
var dv = ('0' + '/' + month + '/' + day)
$(function() {
$.getJSON('spellData.json', function(data) {
var content;
for (var i = "dv"; i < data.length; i++) {
content = $('<tr/>');
content.append("<table>");
content.append("<tr> <th> Prayer </th> <th> Start </th> <th> Jamaat </th> </tr>");
content.append("<tr> <td> Salat Al-Fajr: </td> <td> " + data.fajr_begins + " </td> <td> " + data.fajr_jamah + " </td> </tr> ");
content.append("<tr> <td> Sunrise: </td> <td> " + data.sunrise + " </td> <td> " + data.sunrise + " </td> </tr> ");
content.append("<tr> <td> Salat Al-Ishraq: </td> <td> " + data.ishraq + " </td> <td> " + data.ishraq + " </td> </tr> ");
content.append("<tr> <td> Salat Al-Zuhur: </td> <td> " + data.zuhr_begins + " </td> <td> " + data.zuhr_jamah + " </td> </tr> ");
content.append("<tr> <td> Salat Al-Asr: </td> <td> " + data.asr_mithl + " </td> <td> " + data.asr_jamah + " </td> </tr> ");
content.append("<tr> <td> Salat Al-Magrib </td> <td> " + data.maghrib_begins + "</td> <td> " + data.maghrib_jamah + " </td> </tr> ");
content.append("<tr> <td> Salat Al-Isha </td> <td> " + data.isha_begins + " </td> <td> " + data.isha_jamah + " </td> </tr> ");
content.append("</table>");
$('table').append(content);
}
});
});
</script>
</head>
<body>
<div id="djpyer"> </div>
<table></table>
</body>