Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hello everyone I am new to laravel and i have problem in my view... I can get the student data from the database according to the selected class in the dropdown... And i can see that in my console but in my view I am just getting the text like this in my table [object Object] And nothing else ... Below is my code But the problem is in the ajax
//my view and ajax
<select name="students_class_id" class="form-control" style="width:350px">
<option value="">--- Select State ---</option>
@foreach ($classes as $key => $value)
<option value="{{ $key }}">{{ $value }}</option>
@endforeach
</select>
<table id="studentsData" class="table table-striped table-bordered table-list-search">
<thead>
<tr>
<th>#</th>
<th>Student ID</th>
<th>Student Name</th>
<th>Attendance</th>
</tr>
</thead>
@foreach($students as $student)
<tbody>
<tr>
<th>{{$student->id}}</th>
<td>{{$student->student_id}}</td>
<td>{{$student->first_name}} {{$student->last_name}}</td>
<td>
<div class="form-group">
<select class="form-control" id="gender">
<option>Present</option>
<option>Absent</option>
<option>Leave</option>
</select>
</div>
</td>
</tr>
</tbody>
@endforeach
</table>
<a class="fas fa-folder-open btn btn-success float-right mb-4 mr-2"> Save</a>
</div>
@section('script')
<script>
$(document).ready(function() {
$('select[name="students_class_id"]').on('change', function() {
var classID = $(this).val();
if(classID) {
$.ajax({
url: '/myform/ajax/'+classID,
type: "GET",
dataType: "json",
success:function(data) {
// console.log(data);
$('table[id="studentsData"]').empty();
$.each(data, function(key, value) {
$('table[id="studentsData"]').append('<td value="'+ key +'">'+ value +'</td >');
});
}
});
}
// else{
//
// $('table[id="studentsData"]').empty();
//
// }
});
});
</script>
My best guess is that value is an object instead of a single value. So you need to get a specific field from that object to display in javascript. So something like this
$.each(data, function(key, value) {
$('table[id="studentsData"]').append('<td value="'+ key +'">'+ value.student_id +'</td >');
});
Ahh thats the best answer but what if i want to get more like student name too and wanna display that in the above table perfectly. Its getting now but not according to my table design
@BOBBYBOUWMANN - I want to get this data in my table td . What can I do ?
Well for each item you first need to add a new table row right? And then you need to set the specific columns. So something like this:
$.each(data, function(key, value) {
var markup = '<tr><td>' + value.id + '</td><td>' + value.student_id + '</td><td>' + value.first_name + ' ' + value.last_name + '</td><tr>';
$('table[id="studentsData"]').append(markup);
});
@BOBBYBOUWMANN - Sir your code has so many errors can you please review it . I can't get those errors but the code make sense I hope it will help me out
Ok Thank you.. I get it and its wroking perfectly
I think it's not working because of the enters, try my updated reply :pointing_up:
@BOBBYBOUWMANN - Yes sir now its working perfectly but wanna know another thing... Is there any better way or easy way to include a large block of html code into javascript ?
@lewanay Yes you can! Either with enters on each new line and using plusses or you can use the backticks to make this work:
var myString = '<p>Line One</p>' +
'<p>Line Two</p>' +
'<p>Line Three</p>';
var myString = `<p>Line One</p>
<p>Line Two</p>
<p>Line Three</p>`;
@BOBBYBOUWMANN - Ok sir I looked that code but not what i want.. Let me explain you what I want and i think that is possible too. I want my html template on the same place where it is already ... And wanna convert this json data to html form and then refer to my table .. Is it possible... ? I want something like this
@BOBBYBOUWMANN - I want something like this because above in my table design there is alot of things so i want them to be on their place and just refer this data to go there
Well you first need to remove all table rows in the table and then add the new once with the html and data you want. That should be it!
You can remove all table rows in the table like so
$('table[id="studentsData"] > tbody').html('');
Then you need to add all the rows based on the data you get back.
Please mark your duplicate questions as answered.
@BOBBYBOUWMANN - Well I removed all table rows and then do this $('table[id="studentsData"] > tbody').html(''); But now i am getting data at the backend and nothing else at the frontend
Many developers have faced issue with Laravel View in the code. They have updated this issue in their latest version of the Laravel of the current time careers booster reviews for what you are more altercative in the writing this code for a better view.
Please or to participate in this conversation.