AJAX check if there is a null variable from returned data (Laravel 7)

Got the solution, if a person is also searching for the same thing here’s the answer:

$('body').on('click', '#show-schedule-btn', function () {
var schedule_id = $(this).data("id");

 $.ajax({
    type: "GET",
    url: "http://localhost:8000/DoctorSchedule/"+schedule_id,
    data:{
        "schedule_id":schedule_id,
    },
    success: function(data){
    console.log(data);
    const schedule_details = data;

    let html = ``

    const areAllReqPropsStated = (x) =>{
        return x.first_name && x.last_name && x.oncology_name && x.procedure_name;
    }

     (schedule_details || []).map(x => {
        html = `   <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="control-label">Date</label>
                                <input type="datepicker-show" name="date" id="date" class="form-control" value="${x.schedule_date}" readonly/>
                                </div>
                            </div>
                    </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="control-label">Time Start</label>
                                <input type="time" name="time_start" id="time_start" class="form-control" value="${x.time_start}" readonly/>
                                </div>
                                <div class="col-sm-6">
                                    <label class="control-label">Time End</label>
                                <input type="time" name="time_end" id="time_end" class="form-control" value="${x.time_end}" readonly/>
                                </div>
                            </div>
                        </div>`
                      
        html += areAllReqPropsStated(x)
        ? `         <hr>   
                    <div class="form-group">
                            <h4>Appointment</h4>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Patient Name:</label>
                        <p>${x.first_name} ${x.last_name}</p>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Oncology:</label>
                        <p>${x.oncology_name}</p>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Procedure:</label>
                        <p>${x.procedure_name}</p> 
                    </div>`
        : `<hr>
            <div class="alert alert-success" role="alert">
            <p>No appointment yet</p>
            </div>`;
    }) 
    $("#sched-details").html(html); 
      $('#show-schedule').modal('show'); 
    }
}); 
});

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top