Transforming raw JSON data to meaningful output in AngularJS

[00:00] In our apps, we often have to deal with raw data. In our example here, our user has a first name and last name and the type ID. We have the form where we can edit data. We have a section here where we want to display a human-readable form of this data. Let's implement this feature.

[00:23] We are going to create the full name function, which would return user.firstname plus user.lastname. Then, we attach it to the scope. We use it in our view. This works.

[00:51] Let's create a function to display the type. Type, we have user set up. I can use fine ware from the types collection here.

[01:10] My criteria is value=user.typeID. If ever I have matched, I want to return the display property. As always, I'm going to return an empty string.

[01:36] Let's attach it to the controller again and call it in the view.

[01:47] This works as expected, but it's not reusable. We are linking some logic in our controller.

[01:55] Let's create a service which would be user presenter. This would need the user constants. It would return an object with full name key which would be a function from user, and a type key which would be a function from user as well. We already have our code. Let's copy-paste it and reuse our presenter in our controller. We replace the code and everything still works as expected.

[03:10] Another way to tackle this problem would be to create a user model which would use our presenter. Our model would take some props and we would merge them with this. Then, we are going to work on our prototype. The prototype, I'm going to delegate to the presenter. The same for type, and we return the user model.

[04:08] To use it, we can go back to our controller. Let's get rid of the presenter. Let's get rid of that and now use our model this way and change the code here. Again, it works as expected.

[04:34] Another way to present data is to use filters. Let's create a user filter. We would still use our user presenter and return a function which would take two arguments. The first one would be the user. The second one would be a function name. We are basically going to delegate everything to our user presenter.

[05:13] Now, in order to use our filter, let's get rid of the user model solution here. Let's adopt. Here, we now want to use the user filter. We are going to pass full name as a string which is the function name and the type of the string which is the function name too. Again, it works.

[05:44] When you work with presenters, the question of performance could arise. The full name has no obvious way to be re-factored, but the type is a good match. Let's create function which would be type from ID. It would take the type ID as an argument. It behaves the same.

[06:14] Now, in our function here, we delegate. The way to make it far quicker is to memorize its results. Let's take a look. It works again.