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>