I am trying to use FullCalendar library to design an interactive calendar where user can click on a date to see the corresponding course schedule/ event. For this I need to populate the events in this calendar with my database table data. This needs calendar rendering inside JavaScript. I am facing trouble in accessing database result sets, that I retrieved in JSP, inside JavaScript.
Although my sql table (course) is having multiple columns, only things I need for calendar are course name and date.
I have used <sql:query> in the jsp code for data retrieval from the mysql table. The result is in var="schedule". Next, I have used <c:forEach> to iterate through the result sets and store them in a var="jsonData". I tried printing ${jsonData} in JSP within a <h2> tag and data retrieved in json format is shown. However, when I am trying to access the same inside <script> tag, it is not working as
console.log(${jsonData})
or even
console.log(JSON.stringify(${jsonData}))
shows
[Object Object][Object Object][Object Object]...
for all the records.
EDIT
Following is my code :
<body>
<div class="container">
<div class="row justify-content-around">
<div class="col-md-6">
<div id="about-card">
<div class="card bg-light text-dark">
<div class="card-header text-center">
<h2 class="mt-3">Monthly Schedule</h2>
</div>
<div class="card-body">
<div id='calendar0' class="bg-light text-dark"></div>
<!-- Custom year navigation buttons -->
<div id='year-navigation'>
<button id='prev-year-button'>Previous Year</button>
<button id='next-year-button'>Next Year</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div id="about-card">
<div class="card bg-light text-dark">
<div class="card-header text-center">
<h2 class="mt-3">Schedule details</h2>
</div>
<div class="card-body">
<div id='schedule'>
<p style="color:#406e8e;">Please click on a date to see schedule</p>
</div> <!-- This div will hold the schedule information -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Data retrieval -->
<sql:setDataSource var="snapshot" driver="com.mysql.cj.jdbc.Driver" url="jdbc:mysql://localhost:3306/myDb?useSSL=false" user="root" password="dummypswd"/>
<sql:query dataSource = "${snapshot}" var="schedule">
select session_name,date from course;
</sql:query>
<!-- converting results to JSON format -->
<c:set var="jsonData" value="[]"/>
<c:forEach var="row" items="${schedule.rows}">
<c:set var="session_name" value="${row.session_name}"/>
<c:set var="date" value="${row.date}"/>
<c:set var="jsonObject" value='{"session_name":"${session_name }","date":"${date}"}'/>
<c:set var="jsonData" value='${jsonData} + ${jsonObject}'/>
<c:if test="${!status.last}">,</c:if>
</c:forEach>
<c:set var="theData" value="${jsonData}"/>
<!-- Scripts -->
<h2>Here json data is ${jsonData}</h2> <!--This is printing real fetched data on jsp page-->
<script>
//With all these variables, I am just trying to check how can i get correct jsonData inside script
var jData = ${jsonData};
var ev = JSON.stringify(jData);
var d = ${theData};
console.log("The data ",d); //But none of these printing fetched data
console.log("JSON ev ",ev);
console.log("JSONdata ",jData);
document.addEventListener('DOMContentLoaded', function() {
var events = [
// sample data
{ title: 'Course 1', start: '2023-09-05T11:00:00' },
{ title: 'Course 2', start: '2023-09-15' },
{ title: 'Course 3', start: '2023-09-15' },
{ title: 'Basic Maths Assignment due', start: '2023-09-23', url: 'index.jsp'},
{ title: 'Hazard Management Assignment due', start: '2023-09-15', url: 'index.jsp'}
// Add more event data here from database-- TODO
//This is where I need my fetched data in JSON format. Please help.
];
console.log(events);
var calendarEl = document.getElementById('calendar0');
var scheduleEl = document.getElementById('schedule');
var calendar = new FullCalendar.Calendar(calendarEl, {
//left: 'prevYear,prev,next,nextYear today',
//center: 'title',
//right: 'dayGridMonth,dayGridWeek,dayGridDay',
initialView: 'dayGridMonth',
events: events,
dateClick: function(info) {
// Handle date click event here
// To load and display course information for the clicked date
//alert('Clicked on: ' + info.dateStr);
// To load and display course information for the clicked date
var clickedDate = info.dateStr;
// Simulate loading schedule data
var scheduleData = [
{ time: '10:00 AM - 12:00 PM', event: 'Course 1 Details' },
{ time: '2:00 PM - 4:00 PM', event: 'Course 2 Details' }
];
// Generate HTML for the schedule
var scheduleHTML = '<h4>Schedule for ' + clickedDate + '</h4>';
scheduleHTML += '<ul>';
scheduleData.forEach(function(item) {
scheduleHTML += '<li><b>' + item.time + '</b>: ' + item.event + '</li>';
});
scheduleHTML += '</ul>';
// Update the schedule container with the generated HTML
scheduleEl.innerHTML = scheduleHTML;
}
});
calendar.render();
// Custom year navigation buttons
var currentYear = moment().year(); // Get the current year
// Function to update the calendar to the previous year
function goToPreviousYear() {
currentYear--;
calendar.gotoDate(currentYear + '-01-01'); // Navigate to the previous year
}
// Function to update the calendar to the next year
function goToNextYear() {
currentYear++;
calendar.gotoDate(currentYear + '-01-01'); // Navigate to the next year
}
// Attach event listeners to the custom year navigation buttons
document.getElementById('prev-year-button').addEventListener('click', goToPreviousYear);
document.getElementById('next-year-button').addEventListener('click', goToNextYear);
});
</script>
</body>
Edit 2:
I have tried JSON.parse() . Following are the screenshots
Following is the error displayed in console
If I try console.log("JSON ev ",jData) @line 140, I get object object as follows
The value of JSON is already stringified . You don't need to do it twice.
The following code is wrong
However,
${jsonData}returns a string value. You need to parse it to get JSON object with JSON.parse().