I’m currently tinkering around with Angular JS. I’ve always liked JavaScript and since there is currently one or two (thousand) JavaScript frameworks around I thought I would have a go at the Angular. It wasn’t immediately obvious how to cleanly concatenate strings for display so I wrote a filter and it works quite nicely. As ever I’m not making any claims for this to be technically brilliant but it does work, I wrote it with my own coding fingers and I like it.

The Demo

The demo system for this is a simple search for books using the Google Books API. The results display on an infinite scroll. That’s totally irrelevant to this but again I like it. The demo project code is on github at https://github.com/timbrownls20/BookShelf.MEAN.Stack

The Problem

Books have multiple authors. The Google API returns them in an array i.e.

"volumeInfo": {
 "title": "Baptizing Harry Potter",
 "subtitle": "A Christian Reading of J.K. Rowling",
 "authors": [
 "Luke Bell", “Another Author”
 ]}

We display them on the view with a simple binding

<h4>{{item.volumeInfo.authors}}</h4>

But unfortunately the display looks rubbish

The Solution

We could display them correctly by putting a bit of looping logic in the view but I see enough abuse of views in my day job (and I’m guilty of some of it myself) so I would rather not continue view abuse in my spare time. So let’s whip up a filter. It will be cleaner and reusable.

To implement create a file called filters.js and pop in this

(function () {
 'use strict';

angular
 .module('app')
 .filter('stringConcat', function () {
   return function (input, delimiter) {
     if (input) {
       return input.join(delimiter)
     }
     else {
       return '';
     }
   };
 });

It’s embarrassing straightforward. An array and a delimiter in, join and return. We added it directly into our angular application which is imaginatively called ‘app’. It’s then available to be called in the view with a PowerShell style pipeline i.e.

<h4>{{item.volumeInfo.authors | stringConcat:', '}}</h4>

Don’t forget to reference the new file in the view (html page)

<script src="app/filters.js"></script>

And that’s it, everything looks a lot better.

It’s available to use generally in the application whenever we need to concatenate strings. Lovely and easier to implement than I remembered.

Useful Links

Documentation for AngularJS filters can be found at
https://docs.angularjs.org/api/ng/filter/filter

and an end to end tutorial including filtering is at
https://docs.angularjs.org/tutorial/