How to display the time table from json format

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

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);

Answer 2

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...