10. View All Contacts

In this chapter, we will learn how to fetch all contacts from Mongo DB using Node JS and view them in the Vue JS app.

Create a Component

Create a new file named “ContactComponent.vue” in your components folder. And then include it in your home component. Open your “HomeComponent.vue” file and include the component where you want to show all contacts.

<ContactComponent />

Then replace your <script> tag with the following:

<script>
    import ContactComponent from "./ContactComponent"
    
    export default {
        components: {
            ContactComponent
        }
    }
</script>

Following will be the code of contact component file:

<template>
	<div class="row">
        <div class="col-md-12">
            <h1 class="text-center text-white">Contacts</h1>
        </div>
    </div>
    
	<div class="row">
		<div class="col-md-12">
			<table class="table table-hover">
				<thead>
					<tr>
						<th>Name</th>
						<th>Email</th>
						<th>Actions</th>
					</tr>
				</thead>

				<tbody>
					
				</tbody>
			</table>
		</div>
	</div>
</template>

<script>

	export default {
		//
	}
</script>

This will display an empty contacts table.

contacts table
contacts table

Fetch Contacts from Mongo DB

Then we need to call an AJAX when this component is mounted. Following code goes inside the <script> tag:

import axios from "axios"
import swal from "sweetalert2"

export default {
    data() {
        return {
            contacts: []
        }
    },

    methods: {
        getData: async function () {
            const self = this

            const response = await axios.post(
                this.$apiURL + "/contact/fetch",
                null,
                {
                    headers: this.$headers
                }
            )
            console.log(response)

            if (response.data.status == "success") {
                this.contacts = response.data.contacts
            } else {
                swal.fire("Error", response.data.message, "error");
            }
        }
    },

    mounted() {
        this.getData()
    }
}

Now we need to create an API that will handle this request. Open your “api/modules/contact.js” file and write the following code in it:

router.post("/fetch", auth, async function (request, result) {
    const user = request.user;

    result.json({
        status: "success",
        message: "Contacts has been fetched.",
        contacts: user.contacts
    });
});

Run the app now and check your browser console and you will see that all contacts of that user have been fetched.

fetch contacts response
fetch contacts response

Now we need to display them in the <table> tag.

Display Contacts in <table>

Following code goes in the <tbody> tag:

<tr v-for="contact in contacts" v-bind:key="contact._id">
	<td>
		<span v-text="contact.name"></span>
	</td>

	<td v-text="contact.email"></td>
</tr>

We are looping through all contacts. We need to provide the “key” attribute with a unique ID on the tag where we apply the loop. If we do not do that, then Vue JS will through an error.

In the first <td> tag, we are displaying the name of the contact person. That will be the name you put during adding that contact to the list.

In the second <td> tag, we are displaying the email address of the contact person.

Now that we can view all our contacts on the home page along with a delete button, in the next chapter, we are going to make it unable to delete any contact we want.





Please disable your adblocker or whitelist this site!