Transforming Response Data in MEAN Stack
In our previous section, we learned how to fetch data from the database. We previously discussed the map() function, but we didn’t used it. We have not used the ID on the front-end yet. We have a problem which we have discussed before. It was that we expect to have an id without an underscore on the front-end, but our back-end data does have an underscore.
So, we need to have a setup where we have the right data stored on the front-end. We can simply rename id to _id on the front-end model, and it will work fine, but we will convert the data we get back from the server. We will use the following steps to convert data:
1) We will go back to our service.ts file, and in the getPosts() function, we will use another function, i.e., pipe() before the subscribe() method. The pipe() function allows us to add in such an operator. We can pipe multiple operators. We will import the operator to use it in the pipe() method. We will use the map operator, so we will import it from the rxjs package in the following way:
The map() method allows us to transform every element of an array into a new element and store them all back into a new array.
2) We will use the pipe function and pass the map operator in the following way:
3) In the map method, we get our postData and then we will do something with it in the body of that function. This postData will not be {message: string, posts: Post[]} It will not hold a valid post because the ID is wrong. Instead of type post[], we will set the type of posts to any in the following way:
4) In the body section of the function, we will return the array of posts, and we will do this by accessing posts from the postData in the following way:
This will automatically be wrapped into an observable by rxjs package, so that subscribe function still subscribes to an observable.
5) We already stripped out the message, but we also need to convert every post, and we will do this with the normal javascript method. This map() method can be added to any array and we will use it in the following way:
6) In the post array, we need to replace every post with a new javascript object. We will replace it in the following way:
7) We also need to update our subscribe code. We just replaced the postData with transformedPost and assigned it to the this.posts in the following way:
Now, we will save it and run our angular app on localhost:4200.
In the next section, we will learn how to delete documents. We will do the code for deletion, and for that, we will use the delete button attached to each expansion panel.