Angular JS Display String Array From Json

Question

<li ng-repeat="address in search.result.addresses">
<a href ng-click="selectAddress(address)">
  {{address.addressLines}}
</a>
</li>

The problem is with my {{address.addressLines}}

This is currently a string array so my value on screen is printed out like

["address1","address2","address3","address4"]

But I just want it printed like

address1,address2,address3,address4

Take a look at this answer http://stackoverflow.com/a/18773958/205859 — Ufuk Hacıoğulları, Dec 16 '14 at 14:16

score 10 · Answer 1 · answered Dec 16 '14 at 14:25

10

There are fundamentally 2 ways:

1) By using native angular directives:

<span ng-init="foo=[1,2,3,4]" ng-app="app">
        <span ng-repeat="f in foo">{{f}}<span ng-if="!$last">,</span></span>
</span>

2) By writing a simple filter (best way):

angular.module('app', []).filter('arrayToList', function(){
        return function(arr) {
            return arr.join(',');
        }
    });

<p>{{foo|arrayToList}}</p>

This is the working example on jsfiddle: http://jsfiddle.net/g0dmazzk/

answered Dec 16 '14 at 14:25

daveoncode

18,900
15
104
159

A word to option 2. When you use the code in your existing js, make sure to remove the square brackets! Otherwise you'd redefine your module, overriding any includes you made beforehand. Because as it is in the answer, it is the **setter** for the module. The **getter** is angular.module('app').filter(... Did cost me some hours, because the error showed up elsewhere. Probably a $injector:unpr Unknown Provider error, because of the overridden includes. – Aaginor Jul 22 '15 at 13:56
of course! that was just a quick and dirty code to explain how to create a filter for that purpose :) – daveoncode Jul 22 '15 at 13:59

user3722785 · Answer 2 · 2014-12-16T16:21:59.480

3

You can do this using join also :

 <li ng-repeat="address in search.result.addresses">
        <a href ng-click="selectAddress(address)">
          {{address.addressLines.join()}}
        </a>
     </li>

edited Dec 16 '14 at 16:21

answered Dec 16 '14 at 14:32

user3722785

216
1
13

score 2 · Accepted Answer · answered Dec 16 '14 at 14:19

2

I thing somthing like this would work...

<li ng-repeat="address in search.result.addresses">
<a href ng-click="selectAddress(address)">
  <span ng-repeat="a in address.addressLines"> {{a}},</span>
</a>
</li>

answered Dec 16 '14 at 14:19

Ferticidio

1,099
1
8
3

score 0 · Answer 4 · answered Apr 12 '15 at 15:29

0

To avoid dealing with the comma in the last item on the list, I used a class (label from Bootstrap) like this:

<span ng-repeat="a in address.addressLines" class="label label-default"> {{ a }} </span>

answered Apr 12 '15 at 15:29

vbuser2004

1,002
1
9
20

Angular JS Display String Array From Json

4 Answers4

Linked