By Yasin

So, last week I solved an easy problem yet a fascinating one in its own way. Uses of it applied in the world of frontend programming, and knowing how to solve such problems is quite valuable down the road when doing HTML Form validation and processing-related tasks.

Challenge Statement

The challenge statement is: given an array of error objects, we need to flatten its property constraints and transform them to a string array with the accurate property depth.

In a nutshell, this is what we need to solve: -

And transform the above errors to this: -

A part of the challenge is to solve this using JavaScript. But we will utilize TypeScript to write our solution in the upcoming sections.

Elaboration

Well, it seems like a piece of cake, right? We can solve this quickly if we take a minute or two to understand its schematic structure correctly.

And if we transform this into more approachable static sorts we would get the following types.

Looking at the challenge statement example, we can see that not all Error objects contain the children property. Hence, we should understand that one or more depths will have zero constraints or children to flatten. Therefore, we can safely ignore such results from the transformed object.

We can break down the problem into multiple direction points to further simplify our approach. From my interpretation, we have four main tasks to focus on; and those are: -

  1. Extract the string values from the constraints object.
  2. Concatenate the children's property path along with depth.
  3. Go through all the children errors.
  4. Assign constraints to the path (if there are any).

So how can we crack this?

Solution

We have to use either an iterative or a recursive to solve this problem. First, we can directly jump in and focus on the 1st direction point, extracting the values from the constraints object.

We can write a helper function that accepts a given constraints object and return its extracted strings.

Then we can focus on 2nd direction point, concatenating the children's property path along with depth.

Then the 3rd direction, going through all the children errors. But before that, we need another top-level helper function to compose the algorithm.

I will name it transformError with two parameters in place. The first parameter is an individual error itself and the second is our transformation result object.

Then we should first see whether there are any children available in this error object because remember, it can be optional.

So now, if the error has children then we should go through its children to recursively extract all their constraints.

This is great! Now that we are only left with the 4th Direction, and we can easily append the extractConstaints at last .

We consolidate the last three points into a single function called transformError because they are recurring tasks. By doing this, we should be able to iterate through all the errors and recurse all the children accurately.

And finally, putting it all together, we get this: -

See? formatErrors function is the starting point of our algorithm. We iterate through all the errors we get as the input and calls the transformError with the result instance to hold the flattened records.

Time Complexity

The analysis of the time complexities of this algorithm is quite straightforward. Since we use a recursive approach we can directly apply the master theorem to get the asymptotic estimates.

T(n)=1T(nlog(x2))+O(n) O(nlog(x2))\large{T(n) = 1T(n^{log(x^2)}) + O(n)} \\~\\ \large{\therefore O(n^{log(x^2)})}
Where nn is the length of errors and xx is the depth of children in each error object.

Well, that's it folks! Thanks for reading .

Published   

Join Newsletter 👀

If you like my articles and content, consider signing up for my monthly newsletter. You'll receive updates on new articles, gain access to exclusive posts and things I find interesting and useful.