Display AngularJS array to a 'human' readable string

Question

I have outputted a variable that is an array within my view and while it is displaying the values as following :-

Inbound bound posts will contain ["phone", "car"]

How do I change this to display this in a human format eg. (as below)

Inbound bound posts will contain phone, car

score 4 · Accepted Answer · answered Nov 21 '16 at 12:19

4

if you simply want to list the array you can use join:

arr = ["phone", "car"];
arr.join(", ");

would output: "phone, car".

answered Nov 21 '16 at 12:19

garglblarg

576
1
8
16

score 2 · Answer 2 · answered Nov 21 '16 at 12:19

2

To make array displayed as series of texts

Inbound bound posts will contain {{ ["phone", "car"].join(', ') }}

answered Nov 21 '16 at 12:19

Zamrony P. Juhara

5,222
2
24
40

It is better to keep the logic out of the view. – Matheno Nov 21 '16 at 12:26

score 1 · Answer 3 · answered Nov 21 '16 at 12:19

Create a method on your controller to handle the array->string:

let arrayToWrite = ['phone', 'car'];
aToS() {
  return arrayToWrite.join(' ');
}

Then your view:

Inbound bound posts will contain {{ vm.aToS() }}

(assuming 'vm' is your controller, as per standard convention)

You could input the array to the method too, if you need, rather than defining the array outside the method.

score 1 · Answer 4 · answered Nov 21 '16 at 12:23

1

There are many alternatives. You could also do this:

    <div>
      Inbound bound posts will contain
      <span ng-repeat="obj in objects">{{obj}} </span>
    </div>

and in your controller hold the list on scope:

$scope.objects = ["car", "phone"];

answered Nov 21 '16 at 12:23

Eirini Graonidou

1,506
16
24

score 1 · Answer 5 · answered Nov 21 '16 at 12:24

1

You could use a filter:

myApp.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 (!!prop ? array.map(function (item) {
            return item[prop];
        }) : array).join(separator);
    };
});

And in your HTML, simply write this:

<div ng-controller="MyCtrl">
  Inbound bound posts will contain {{things | join: ', ' }}
</div>

A working JSFiddle: http://jsfiddle.net/Lvc0u55v/12345/

answered Nov 21 '16 at 12:24

Matheno

4,112
6
36
53

Question have Array in view.So Is code have higher priority than data?? – Nikhil Mohanan Nov 21 '16 at 12:34
Best practice is to keep the logic out of the view. You should define your array in your controller for example. This is also needed for unit testing, code readability, reusability etc etc. – Matheno Nov 21 '16 at 12:35
Then why are you using expressions inside your view? – Nikhil Mohanan Nov 21 '16 at 12:36
Isn't that the whole purpose of Angular? ;-) – Matheno Nov 21 '16 at 12:37
using expressions inside the code is also not a best practice,lets use ng-bind and change the code. – Nikhil Mohanan Nov 21 '16 at 12:37
Basically the double-curly syntax is more naturally readable and requires less typing. ng-bind still has an issue with displaying arrays from a factory in a view. But indeed, ng-bind would be better if you do not want to have a chance that the user would see the {{expression}} before all data is loaded. – Matheno Nov 21 '16 at 12:40
Just go through this, if you are new to angularjs http://stackoverflow.com/questions/16125872/angularjs-why-ng-bind-is-better-than-in-angular/23382400#23382400 – Nikhil Mohanan Nov 21 '16 at 12:42
I'm not entirely new to Angular, but thanks for the info. I just want to point out that since early 2015 curly interpolation is handled just like a directive (see addTextInterpolateDirective() in ng/compile.js). – Matheno Nov 21 '16 at 12:52

Display AngularJS array to a 'human' readable string

5 Answers5