AngularJS: Neat way to print array as string

Question

I have a following array:

"cast": [
      {
        "name": "James Stewart"
      },
      {
        "name": "Kim Novak"
      },
      {
        "name": "Barbara Bel Geddes"
      },
      {
        "name": "Tom Helmore"
      }
    ]

What is the neat in AngularJS to to format it as:

James Stewart, Kim Novak, Barbara Bel Geddes, Tom Helmore

Is there a way to use filter or formatter so that I can neatly do it in template like:

<font class="authors-string">{{ object.cast | filter/formatter/? }}</font>

I think writing logic for this simple parsing in controller would clutter controller body.

Thanks for your interest.

Just use ng-repeat: <div ng-repeat="person in cast">{{ person.name }}</div> edit: <span> might be better for you here — azium
– azium, Commented Sep 4, 2015 at 21:35

Ori Drori · Accepted Answer · 2017-10-10 10:34:47Z

14

This is a filter that extracts a certain prop from each array element, then joins them using a separator (demo):

app.filter('join', function () {
    return function join(array, separator, prop) {
        if (!Array.isArray(array)) {
            return array; // if not array return original - can also throw error
        }

        return (!angular.isUndefined(prop) ? array.map(function (item) {
            return item[prop];
        }) : array).join(separator);
    };
});

Usage:

<p class="authors-string">{{ cast | join:', ':'name' }}</p>

If it is a flat array, you drop the 3rd parameter:

<p class="authors-string">{{ animals | join:', ' }}</p>

edited Oct 10, 2017 at 10:34

answered Sep 4, 2015 at 21:40

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

abdul-wahab Over a year ago

Thanks, it simplified my code. But are there any dangers associated with using Array.prototype.map regarding compatibility?

Tommaso Boggia · Accepted Answer · 2018-12-03 21:50:09Z

3

You can use 'ng-repeat' - https://docs.angularjs.org/api/ng/directive/ngRepeat

An example would be:

<div ng-repeat="(key, value) in myObj"> ... </div>

To add a comma on all but the last value:

<div ng-repeat="(key, value) in myObj"> ... <span ng-if="!$last">, </span></div>

edited Dec 3, 2018 at 21:50

Tommaso Boggia

1592 silver badges13 bronze badges

answered Sep 4, 2015 at 21:42

eSs

598 bronze badges

1 Comment

abdul-wahab Over a year ago

But how I'll insert joining commas in between items if I use ng-repeat?

Collectives™ on Stack Overflow

AngularJS: Neat way to print array as string

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related