How to display the time table from json format - php

Question

Here i am doing school management time table creation,already created the time table for class Name (LKG) and section Name (A).Here i will share my DB structure.
time_table (Table Name)
timeTableId classId sectionId subjectId teacherId dayId period
1 LKG A Tamil X Monday 1
2 LKG A Tamil X Monday 3
3 LKG A Hindi X Monday 2
4 LKG A English X Monday 4
5 LKG A Science X Monday 5
6 LKG A Maths X Monday 6
7 LKG A Science X Monday 7
8 LKG A Hindi X Monday 8
9 LKG A Tamil X Tuesday 1
10 LKG A Tamil X Tuesday 3
11 LKG A Hindi X Tuesday 2
12 LKG A English X Tuesday 4
13 LKG A Science X Tuesday 5
14 LKG A Maths X Tuesday 6
15 LKG A Science X Tuesday 7
16 LKG A Hindi X Tuesday 8
Now i want to display the time table Like this
expected Answer
Day Period1 Period2 Period3 Period4 Period5 Period6 Period7 Period8
Monday Tamil Hindi Tamil English Science Maths Science Hindi
Tuesday Tamil Hindi Tamil English Science Maths Science Hindi
My HTML Table
<table id="timeTableList" class="table table-bordered table-striped">
<thead>
<tr>
<th>Day</th>
<th>Peroid 1</th>
<th>Peroid 2</th>
<th>Peroid 3 </th>
<th>Peroid 4</th>
<th>Peroid 5</th>
<th>Peroid 6</th>
<th>Peroid 7</th>
<th>Peroid 8</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
My Controller
public function timetabeleget_validate()
{
date_default_timezone_set('Asia/Kolkata');
$data = array(
"classId" => $_POST['className'],
"sectionId" => $_POST['sectionName'],
);
$login_response= $this->Add_settings->get_timeTable($data);
}
My Model
public function get_timeTable($params)
{
$this->db->select('*');
//$this->db->order_by("timeTableId","desc");
$this->db->where('status !=', '1');
$this->db->where('schoolId =', $this->session->userdata('school_id'));
$this->db->where('classId =', $params['classId']);
$this->db->where('sectionId =', $params['sectionId']);
$result=$this->db->get('time_table')->result();
if(!empty($result)){
$data = array("status" => "success", "monday" => $result);
echo json_encode($data);
}
else{
$data = array("status" => "Error", "description" => "Not Found");
echo json_encode($data);
}
}
My Response
{
"status": "success",
"monday": [
{
"timeTableId": "1",
"schoolId": "4",
"classId": "8",
"sectionId": "18",
"subjectId": "5",
"teacherId": "7",
"dayId": "1",
"period": "1",
"academicYear": "2017",
"status": "0"
},
{
"timeTableId": "3",
"schoolId": "4",
"classId": "8",
"sectionId": "18",
"subjectId": "10",
"teacherId": "2",
"dayId": "1",
"period": "2",
"academicYear": "2017",
"status": "0"
},
{
"timeTableId": "2",
"schoolId": "4",
"classId": "8",
"sectionId": "18",
"subjectId": "5",
"teacherId": "7",
"dayId": "1",
"period": "3",
"academicYear": "2017",
"status": "0"
},
{
"timeTableId": "4",
"schoolId": "4",
"classId": "8",
"sectionId": "18",
"subjectId": "6",
"teacherId": "3",
"dayId": "1",
"period": "4",
"academicYear": "2017",
"status": "0"
},
{
"timeTableId": "5",
"schoolId": "4",
"classId": "8",
"sectionId": "18",
"subjectId": "8",
"teacherId": "6",
"dayId": "1",
"period": "5",
"academicYear": "2017",
"status": "0"
},
{
"timeTableId": "6",
"schoolId": "4",
"classId": "8",
"sectionId": "18",
"subjectId": "7",
"teacherId": "3",
"dayId": "1",
"period": "6",
"academicYear": "2017",
"status": "0"
},
{
"timeTableId": "7",
"schoolId": "4",
"classId": "8",
"sectionId": "18",
"subjectId": "8",
"teacherId": "6",
"dayId": "1",
"period": "7",
"academicYear": "2017",
"status": "0"
},
{
"timeTableId": "8",
"schoolId": "4",
"classId": "8",
"sectionId": "18",
"subjectId": "10",
"teacherId": "5",
"dayId": "1",
"period": "8",
"academicYear": "2017",
"status": "0"
}
]
}
Here bassed upon my response i am not able to display the time table format,
My FORM and AJAX
<form action="#" method="POST" id="getTimeTableForm">
<div class="box-body">
<div class="form-group">
<label for="Class Name" class="col-sm-3 control-label">Class Name: <span class="star"> * </span></label>
<div class="col-md-9">
<select class="form-control select2 classId" style="width: 100%;" name="className" onchange="getSection(this.value);" required="" data-msg-required="Please select class name" aria-required="true">
<option value="">Select Class</option>
<?php
foreach ($dbResultClass as $desc) :
?>
<option value="<?php echo $desc->class_id; ?>"><?php echo $desc->class_name; ?></option>
<?php endforeach;?>
</select>
</div>
</div>
<div class="form-group">
<label for="Section Name" class="col-sm-3 control-label">Section Name: <span class="star"> * </span></label>
<div class="col-md-9">
<select class="form-control select2 sectionAppend sectionId" style="width: 100%;" name="sectionName" required="" data-msg-required="Please select section name" aria-required="true" >
<option value="">Select Section</option>
</select>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="submit" class="btn btn-info pull-right" id="btn-submit">Submit</button>
</div>
<!-- /.box-footer -->
</form>
AJAX
$(document).ready(function(){
$("#btn-submit").click(function(e){
e.preventDefault();
if($("#getTimeTableForm").valid()){
$( "#btn-submit" ).prop( "disabled", true );
$.ajax({
type:'POST',
url :"timetabeleget_validate",
data: $('form#getTimeTableForm').serialize(),
success: function(data) {
var res=jQuery.parseJSON(data);
console.log(res);
/*if(res['status']=="success"){
var htmlString='';
$.each( res['monday'], function( key, value ) {
var period = value.period
});
alert(period);
$('#timeTableList tbody').empty().append(htmlString);
}else{
$('#timeTableList tbody').empty().append('No Datas Found');
}*/
},
error:function(exception){
alert('Exeption:'+exception);
}
});
}
});
});

Answer 1

Update following code with your ajax success function
if(res['status']=="success"){
var rw = '<tr><td>Monday</td>';
$.each( res['monday'], function( key, value ) {
rw += '<td>'+value.subjectId+'</td>';
});
rw += '</tr><tr><td>Tuesday</td>';
$.each( res['tuesday'], function( key, value ) {
rw += '<td>'+value.subjectId+'</td>';
});
rw += '</tr><td>Wednesday</td>';
$.each( res['wednesday'], function( key, value ) {
rw += '<td>'+value.subjectId+'</td>';
});
rw += '</tr><td>Thursday</td>';
$.each( res['thursday'], function( key, value ) {
rw += '<td>'+value.subjectId+'</td>';
});
rw += '</tr><td>Friday</td>';
$.each( res['friday'], function( key, value ) {
rw += '<td>'+value.subjectId+'</td>';
});
rw += '</tr><td>Saturday</td>';
$.each( res['saturday'], function( key, value ) {
rw += '<td>'+value.subjectId+'</td>';
});
rw += '</tr>';
$('#timeTableList tbody').empty().append(rw);
}
Hope it will be work for you. If you need any help let us know... We happy to help you out...

Answer 2

You first have to change the code in the model where you are fetching the data..
Apply the orderBy on period column instead of timeTableId column. So that you can display the subjects in ascending order.
Below code is the part of your ajax call after getting the response.
Here, first, you need to unset the key 'status' from the response object.
delete res.status;
var time_table_template = '<tr>';
$.each(res,function(index, entries){
time_table_template += '<td>'+index+'</td>';
$.each(entries, function(index, data){
time_table_template += '<td>'+data.subjectId+'</td>';
});
});
time_table_template += '</tr>';
$("#timeTableList tbody").append(time_table_template);