Fetching data from the database in MEAN Stack
In our previous section, we learned how to connect to the database using the MongoDB shell and saw the commands to access it from the MongoDB shell. In this section, we will learn how we can fetch the data stored in our database. We will make changes in our app.js file again.
We will do the following steps to fetch data from the database:
1) We will go back to our app.js file and reach the get() method in which we returned the dummy data to our client. Now, we will not return the dummy data here. We will return the real data, so we will get rid of it in our code.
2) Now, we will fetch the data from the posts collection. Previously, we created a post with the help of our post model and that we instantiated in our post() method with the new keyword. We will use the post model for fetching data again, but this time we use it without the keyword. We will use the static method provided by mongoose, i.e., find() method.
This find() method will return all the entries in the database. This find() method can also be configured to narrow down the results we get, but we will fetch all the results at that time. This function will be used in the following way:
3) There are two ways to get that results and use them:
a. We can pass a function that will be executed once it is done. This function callback will get two arguments, i.e., error and the result or document it fetched. This will be codded in the following way:
b. Instead of using a callback, we will chain a then block. This then block will hold our result, so we will get back all the documents in this block. After getting all documents, we will console.log these documents in the following way:
4) We also need to add a catch block with it to handle the error, but we will do this later. Now, we will reload our angular frontend.
We get an error here because, in the response, we use posts array, which we have deleted before.
5) Now, we will replace the posts array with documents in the response and we will put this response code into the then block. It is important and we must execute it inside this then block because fetching that data is an asynchronous task. So, the complete app.get() method will be designed in the following way:
6) We expect to get an ID field on the frontend, but on the backend, it’s name _id. We will fix it by renaming it on the server. In the get() method, we will not directly assign documents to the posts. We will assign the document.map() to the posts in the following way:
Note: We will use the map() method later in our code.
Now, we reload our angular frond-end, and we will see the data in the expansion panel.
Our document data will also be visible in our console.
In the next section, we will learn how we can transform the response data in MEAN Stack.
Download Complete Project(Fetching data from database.zip)