Break That Loop

Angular is very cool- and handles quite a bit of the ‘grunt work’ in front end development.  For example- our contact form.  It submits to a database where our sales team can review as needed.  So we created a little interface to display all the entries.  But what if an entry needs to be edited, or notes need to be made?

So, we added an ‘edit’ option to each form result.  Up to now, Angular has helped tremendously.  We can ng-repeat out all the form results, add a little css formatting, and it’s a usable format with minimal effort.  The edit feature was also fairly straightforward- we created a modal that populates with input fields for each database field.  So, click on the form submitted by John Doe, and a modal pops up with all the info he submitted, editable right there in the pop up.  Angular binding handles all the work we would have had to do with jQuery in the past.  Just by dropping in some ng-model tags on the input fields, we eliminate a forest of client side code that would be needed to link the form field content to the database info (I suppose that forest is still there, just abstracted away by Angular).

But there are still some cases where it’s a tough go- even with Angular’s help.  For example- one of the form fields is for a product selection.  The field is stored as a simple text string on the database, but the actual selection is made via a drop down that’s linked to a multiple level object.  So it’s not as simple as having the ng-model of the select match the string retrieved from the database- we have to link it into the object at the proper point.

Which brings us back to Javascript- the little language that powers all this jazz (at least on the frontend).  Using a ‘for’ loop, we set each field on the edit form to the content from the database (fetched via an $http in the controller).  That handles 99% of the fields just fine.  It also initializes the product selection drop down to the correct string.  Then, we use one more ‘for’ loop.  This one loops over the list of products in the scope (this is the large object that stores products by category, with all kinds of info about them).  It re-sets the products drop down on the frontend to match the actual object property (where we originally only had a string).

It all feels a bit hacky, but it really does work.  Someone editing the contact can set a new product from the existing drop down and it saves properly for future viewing/editing.  We used a traditional ‘for’ loop in this case (instead of the new, functional programming, hotness of ‘forEach’) to be able to break out of the loop early.  If the loop finds a match in the object on the 2nd time through, it hits a ‘break’ statement and returns early, instead of searching through all 100 properties every time.  Might not make a huge difference, but it seemed like a good idea, performance-wise.

As always with these entries, I’m sure something doesn’t make sense.  Or we did this the longest, hardest, least-efficient way possible.  If that’s true, don’t be afraid to chime in!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s