Unable to get data from foreign key table in Laravel Vue addressbook project

Question

I have made a complete laravel address book that works, but I'm having trouble getting any of the address data for each of the contacts in the laravel vue project.

I'm effectively calling the modal and the contact data comes through but not the associated addresses.

Modal (in index.vue)

   <!-- Details Modal-->
                <Modal
                    v-model="detailsModal"
                    title="Contact Details"
                    :mask-closable="false"
                    :closable="false">
                    <!--~~~~~~~ Addresses Table ~~~~~~~~~-->
                    <div class="_1adminOverveiw_table_recent _box_shadow _border_radious _mar_b30 _p20">
                        <p class="_title0">Contacts Details<Button type="success" @click="createAddressModal=true"><Icon type="md-add" />Add Contact</Button></p>
                        <h5>{{this.contactDetailsData.firstName}}</h5>
                        <h4>{{this.contactDetailsData.firstName}} {{this.contactDetailsData.lastName}}</h4>
                        <h2>{{this.contactDetailsData.phone}}</h2>
                        <h2>{{this.contactDetailsData.email}}</h2>
                        <div class="_overflow _table_div">
                            <table class="_table">
                                    <!-- TABLE TITLE -->
                                <tr>
                                    <th>Number</th>
                                    <th>Street</th>
                                    <th>City</th>
                                    <th>State</th>
                                    <th>Zip</th>
                                    <th>Type</th>
                                    <th>Action</th>
                                </tr>
                                    <!-- TABLE TITLE --><!-- ITEMS -->
                                <tr v-for="(addresses, i) in addressList" :key="i">
                                <!-- v-if="contactss.length" -->
                                    <td>{{addresses.number}}</td>
                                    <td>{{addresses.street}}</td>
                                    <td>{{addresses.city}}</td>
                                    <td>{{addresses.state}}</td>
                                    <td>{{addresses.zip}}</td>
                                    <td>{{addresses.type}}</td>
                                    <td>
                                        <Button type="warning" size="small" @click="showEditAddressModal(addresses, i)">Edit</Button>
                                        <Button type="error" size="small" @click="$router.push({path: 'deleteAddress', params: { id: $route.params.id },})">Delete</Button>
                                        <Button
                                            type="error"
                                            size="small"
                                            @click="showDeleteAddressModal(addresses, i)"
                                            :loading="addresses.isDeleting">Delete
                                        </Button>
                                    </td>
                                </tr>
                                    <!-- ITEMS -->
                            </table>
                        </div>
                    </div>
                </Modal>

Modal script (in index.vue)

        async showDetailsModal(contact, index){
            let obj = {
                id : contact.id,
                firstName : contact.firstName,
                lastName : contact.lastName,
                email : contact.email,
                phone : contact.phone,
                birthday : contact.birthday,
                addresses : contact.addresses
            },
            contactDetailsData = obj
            console.log(contactDetailsData)
            const res =  await this.callApi('get', 'app/details', contact)
            console.log(res)
            if(res.status===200){
                this.addressList = res.data
                this.showDetailsModal = true
            } else {
                this.swr(error)
            }
            this.index = index
        },

Web.php

// Addresses Routes
    Route::get('/app/details', 'App\Http\Controllers\ContactController@details');
    Route::post('/app/createAddress', 'App\Http\Controllers\ContactController@createAddress');
    Route::post('/app/editAddress', 'App\Http\Controllers\ContactController@editAddress');
    Route::post('/app/deleteAddress', 'App\Http\Controllers\ContactController@deleteAddress');

Contactcontroller

    // Addresses
    public function details(Request $request) {
        // dump($request);
        $contactData = Contact::find($request->id);

        $addressList = $contactData->addresses;
        // $data = [$contactData,$addressLists];
        dump($addressList);
        // dump($contactData);
        if($addressList) {
            // $addressLists = $contactData->addresses;
            // return ($contactData);
            return ($addressList);
        } else {
            return response()->json('The contact details failed');
            // return redirect('index');
        }
    }

I've tried using different methods but I'm not getting any data back and the addresses keep coming up "undefined". After a month and a half of trying I need help. Let me know if you need any other information. Thanks in advance as always!!

Answer 1

Ok So I figured it out with help from my buddy. Great guy so Credit for this fix goes to Jerome Alona...

In my index vue I had to change my API call to include the Id

const res =  await this.callApi('get' , 'app/details?id=' + contact.id , contactDetailsData)

Once I did that it worked.