I want to fetch / get data from my mysql database in my laravel project. Here i can save data and i wrote a script to show data list using axios and javascript but showing error.
Can you help to where is my error?
here is my Routes
Route::get('/blogs', [BlgoCategoryController::class, 'index'])->name('categories.index');
Route::get('/blogs/{category}', [BlgoCategoryController::class, 'show'])->name('categories.show');
Route::post('/blogs', [BlgoCategoryController::class, 'store'])->name('categories.store');
Route::put('/blogs/{category}', [BlgoCategoryController::class, 'update'])->name('categories.update');
Route::delete('/blogs/{category}', [BlgoCategoryController::class, 'destroy'])->name('categories.destroy');
I wrote these scripts in my controller file
class BlgoCategoryController extends Controller {
public function index(Request $request) {
$perPage = $request->perPage ?? 5;
$keyword = $request->keyword;
$query = BlogCategory::query();
if ($keyword) {
$query = $query->where('category_name', 'like', '%' . $keyword . '%');
}
$categories = $query->orderByDesc('id')->paginate($perPage)->withQueryString();
return view('admin.blogs.categories', compact('categories'));
}
public function show(BlogCategory $category) {
return $category;
}
//Store News Customer
function store(Request $request){
$validated = $request->validate([
'category_name' => 'required|string|max:50'
]);
$category = BlogCategory::create($validated);
return response()->json($category, Response::HTTP_CREATED);
}
public function update(Request $request, BlogCategory $category) {
$validated = $request->validate([
'category_name' => 'required|string|max:50'
]);
$category->update($validated);
return response()->json($category);
}
public function destroy(BlogCategory $category) {
$category->delete();
return response()->json(null, Response::HTTP_NO_CONTENT);
} }
I want to fetch data in this view file
<div id="loader" class="LoadingOverlay d-none">
<div class="Line-Progress">
<div class="indeterminate"></div>
</div>
</div>
<div class="card shadow">
<div class="card-header">
<div class="row">
<div class="col-md-6 col-sm-12">
<h5>{{__('Blog Categories')}}</h5>
</div>
<div class="col-md-6 col-sm-12 text-right">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#categoryModal">
{{__('Add Category')}}
</button>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-2 px-2">
<div class="form-group">
<label>Per Page</label>
<select id="perPage" class="form-control form-select-sm form-select">
<option>5</option>
<option>10</option>
<option>15</option>
</select>
</div>
</div>
<div class="col-md-2 px-2">
<div class="form-group">
<label>Search</label>
<div class="input-group">
<input value="" type="text" id="keyword" class="form-control">
<button class="form-control btn btn-success" type="button" id="searchButton">Search</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 p-2 col-sm-12 col-lg-12">
<div class="table-responsive bg-white rounded-3 p-2">
<table class="table table-bordered" id="tableData">
<thead>
<tr class="bg-light">
<th>{{__('Category ID')}}</th>
<th>{{__('Category Name')}}</th>
<th>{{__('Category Slug')}}</th>
<th>{{__('Action')}}</th>
</tr>
</thead>
<tbody id="tableList">
</tbody>
</table>
</div>
</div>
<div class="col-md-2 p-2">
<div class="">
<button onclick="handlePrevious()" id="previousButton" class="btn btn-sm btn-success">{{__('Previous')}}</button>
<button onclick="handleNext()" id="nextButton" class="btn btn-sm mx-1 btn-success">{{__('Next')}}</button>
</div>
</div>
</div>
</div>
</div>
And here is my Javascript
let currentPage = 1
// Function to fetch and display the list of customers
async function getList() {
const perPage = document.getElementById("perPage").value
const keyword = document.getElementById("keyword").value
try {
function showLoader() {
document.getElementById('loader').classList.remove('d-none')
}
const response = await axios.get(
`/blogs?page=${currentPage}&perPage=${perPage}&keyword=${keyword}`)
console.log(response);
updateTable(response.data)
} catch (error) {
console.error('Error fetching customer data:', error);
} finally {
function hideLoader() {
document.getElementById('loader').classList.add('d-none')
}
}
}
// Function to update the table with customer data
function updateTable(data) {
const tableList = document.getElementById("tableList");
// Check if there are no categories to display
if (!data.data.length) {
tableList.innerHTML = '<tr><td colspan="4" class="text-center">No categories found.</td></tr>';
return;
}
// Build the rows HTML string
const rowsHtml = data.data.map(category => {
return `<tr>
<td>${category.id}</td>
<td>${category.category_name}</td>
<td>${category.category_slug}</td>
<td>
<button data-id="${category.id}" class="btn editBtn btn-sm btn-outline-success">Edit</button>
<button data-id="${category.id}" class="btn deleteBtn btn-sm btn-outline-danger">Delete</button>
</td>
</tr>`;
}).join('');
// Update the table with the new rows
tableList.innerHTML = rowsHtml;
}
// Event listeners for pagination and search
document.getElementById('perPage').addEventListener('change', () => {
currentPage = 1
getList()
})
document.getElementById('searchButton').addEventListener('click', () => {
currentPage = 1
getList()
})
// Functions for handling pagination buttons
function handlePrevious() {
if (currentPage > 1) {
currentPage--
getList()
}
}
function handleNext() {
currentPage++
getList()
}
// Function to delete a customer
async function deleteCategory(id) {
let isConfirmed = confirm("Are you sure you want to delete this category?")
if (isConfirmed) {
try {
function showLoader() {
document.getElementById('loader').classList.remove('d-none')
}
await axios.delete(`/blogs/${id}`)
getList()
} catch (error) {
console.error('Error deleting category:', error)
} finally {
function hideLoader() {
document.getElementById('loader').classList.add('d-none')
}
}
}
}
// Attach event listeners to dynamically created buttons
document.getElementById('tableList').addEventListener('click', function(event) {
const target = event.target
if (target.classList.contains('deleteBtn')) {
const categoryId = target.getAttribute('data-id')
deleteCategory(categoryId)
}
if (target.classList.contains('editBtn')) {
const categoryId = target.getAttribute('data-id')
fillUpUpdateForm(categoryId)
}
})
// Initial list fetch
getList()
Please help me to show the data list.