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 stackoverflow.com/a/18773958/205859 — Ufuk Hacıoğulları
– Ufuk Hacıoğulları, Commented Dec 16, 2014 at 14:16

daveoncode · Accepted Answer · 2014-12-16 14:25:51Z

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, 2014 at 14:25

daveoncode

19.7k19 gold badges108 silver badges163 bronze badges

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

2 Comments

Aaginor Over a year ago

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.

daveoncode Over a year ago

of course! that was just a quick and dirty code to explain how to create a filter for that purpose :)

user3722785 · Accepted Answer · 2014-12-16 16:21:59Z

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, 2014 at 16:21

answered Dec 16, 2014 at 14:32

user3722785

2161 silver badge13 bronze badges

Comments

Ferticidio · Accepted Answer · 2014-12-16 14:19:26Z

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, 2014 at 14:19

Ferticidio

1,0991 gold badge8 silver badges3 bronze badges

Comments

vbuser2004 · Accepted Answer · 2015-04-12 15:29:25Z

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, 2015 at 15:29

vbuser2004

1,0421 gold badge10 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular JS Display String Array From Json

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related