Angularjs, output a string or an array of strings from json object

Question

Suppose I have a json object:

{record: [{value:"some string"}, {value:["A string", "B string"]}]}

The output I want to get out of that is quite simple: a string if there is a single string, or a concatenated string if there is an array of strings

value: some string
value: A string, B string

But when I write this code:

<span ng-repeat="r in record">value: {{r.value}}<br/></span>

Both values are considered to be strings and I get this output:

value: some string
value: ["A string", "B string"]

when I write this code:

<span ng-repeat="r in record">value: {{r.value.join(", ")}}<br/></span>

Both values are considered to be arrays and since first one is not, I get this (first value is missing):

value:
value: A string, B string

What would be the best way to handle this?

Noah Freitas · Accepted Answer · 2016-01-09 20:06:01Z

1

You could switch on the type in your expression:

<span ng-repeat="r in record">
    value: {{ Array.isArray(r.value) ? r.value.join(", ") : r.value }}<br/>
</span>

Or you could add a filter to encapsulate the logic:

myModule.filter('joinIfArray', function () {
    return function (input) {
        return Array.isArray(input) ? input.join(", ") : input;
    };
});

And use it like:

<span ng-repeat="r in record">value: {{ r.value | joinIfArray }}<br/></span>

edited Jan 9, 2016 at 20:06

answered Jan 9, 2016 at 20:01

Noah Freitas

17.5k11 gold badges53 silver badges67 bronze badges

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

1 Comment

J. Titus Over a year ago

I think you want Array.isArray(r.value) instead.

Jeremy · Accepted Answer · 2016-01-09 20:13:16Z

1

Slightly shorter:

<span ng-repeat="r in record">value: {{r.value.join(", ") || r.value}}<br/></span>

answered Jan 9, 2016 at 20:13

Jeremy

1,92015 silver badges21 bronze badges

3 Comments

Noah Freitas Over a year ago

That'll throw if r.value's a String.

yggdraa Over a year ago

It does work too, just tried this one, no error was thrown

Jeremy Over a year ago

You're both right. It throws an exception, which causes the second value to be returned. If you wrap in a try catch it would break. This may be fragile. Another approach might be more robust.

anotherdev · Accepted Answer · 2016-01-09 23:52:32Z

1

Another way, it should be recursive.

your current file:

<span ng-repeat="r in record track by $index" ng-include="'mytemplate.html'"></span>

template.html:

<span ng-if="! isArray(r.value)">value: {{r.value}}<br/></span>
<span ng-if="isArray(r.value)"><span ng-include="'mytemplate.html'"></span><span ng-if="!$last">, </span></span>

In the controller:

$scope.is_array = function(data) {
  return Array.isArray(data);
}

edited Jan 9, 2016 at 23:52

answered Jan 9, 2016 at 20:07

anotherdev

2,5671 gold badge16 silver badges24 bronze badges

4 Comments

yggdraa Over a year ago

For some reason Array.isArray() in template html does not work and in this example I get output as if there is a string in both cases. The filter example works fine, it has Array.isArray() working just fine in js module file. I wonder why Array.isArray() does not work properly in template html?

anotherdev Over a year ago

@yggdraa: oops in fact you need to declare a method in the scope and call it. I modified

yggdraa Over a year ago

oh, I did not notice there was isArray(r.value), used Array.isArray(r.value). Now this method works too. I do like the one with a filter more, though 8)

anotherdev Over a year ago

@yggdraa: i edited, it was Array.isArray before. Yes the filter is the best solution if you dont need recursion. With that kind of structure, you are able to handle lots of recursion cases.

Collectives™ on Stack Overflow

Angularjs, output a string or an array of strings from json object

3 Answers 3

1 Comment

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related