Veritabanından json olarak veri alıp blade içinde listelemeye calısıyorum ama ekranda gordugum tek sey düz json verileri.
controller kodu
public function anasayfa() {
$firmalar = Firmalar::all();
$contactList = $firmalar->map(function ($firma) {
return [
'id' => $firma->id,
'unvan' => $firma->unvan,
'adres' => $firma->adres,
'vergino' => $firma->vergino,
'yetkili' => $firma->yetkili,
'yemail' => $firma->yemail,
'ytelefon' => $firma->ytelefon,
];
})->toArray();
return response()->json($contactList);
}
js kodları
document.addEventListener("alpine:init", () => {
Alpine.data("contacts", () => ({
defaultParams: {
id: null,
unvan: '',
adres: '',
vergino: '',
yetkili: '',
ytelefon: '',
yemail: ''
},
displayType: 'list',
addContactModal: false,
params: {
id: null,
unvan: '',
adres: '',
vergino: '',
yetkili: '',
ytelefon: '',
yemail: ''
},
filterdContactsList: [],
searchUser: '',
contactList: [],
init() {
this.fetchContacts();
},
fetchContacts() {
fetch("/firmalar/anasayfa")
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
this.contactList = data;
this.searchContacts(); // Yeniden filtreleme yap
})
.catch(error => {
console.error('Veri alımı hatası:', error);
this.showMessage('Veri alınırken bir hata oluştu.', 'error');
});
},
searchContacts() {
if (!this.searchUser) {
this.filteredContactsList = this.contactList;
return;
}
this.filteredContactsList = this.contactList.filter((contact) =>
contact.unvan.toLowerCase().includes(this.searchUser.toLowerCase()) ||
contact.adres.toLowerCase().includes(this.searchUser.toLowerCase()) ||
contact.vergino.toLowerCase().includes(this.searchUser.toLowerCase()) ||
contact.yetkili.toLowerCase().includes(this.searchUser.toLowerCase()) ||
contact.yemail.toLowerCase().includes(this.searchUser.toLowerCase()) ||
contact.ytelefon.toLowerCase().includes(this.searchUser.toLowerCase())
);
},
tablo kodları
<div class="mt-5 panel p-0 border-0 overflow-hidden">
<table class="min-w-full">
<thead>
<tr>
<th>Ünvan</th>
<th>Adres</th>
<th>Vergi No</th>
<th>Yetkili</th>
<th>Yetkili Email</th>
<th>Yetkili Telefon</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<template x-for="contact in filterdContactsList" :key="contact.id">
<tr>
<td x-text="contact.unvan"></td>
<td x-text="contact.adres"></td>
<td x-text="contact.vergino"></td>
<td x-text="contact.yetkili"></td>
<td x-text="contact.yemail"></td>
<td x-text="contact.ytelefon"></td>
<td>
<div class="flex gap-4 items-center justify-center">
<button type="button" class="btn btn-sm btn-outline-primary" @click="editUser(contact)">Edit</button>
<button type="button" class="btn btn-sm btn-outline-danger" @click="deleteUser(contact)">Delete</button>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>