How to split the data in AngularJS?

Question

JS code:

$scope.records={"0.19", "C:0.13", "C:0.196|D:0.23"} 
    .filter('filterOutput', function () {
        return function (input) {
            if (input.indexOf(":") != -1) {
                var out = input
                    .split('|')
                    .map(function (v) {
                        var s = v.split(':')
                        return s[0] + ':' + (Number(s[1]) * 100) + "%"
                    })
                    .join()
                return out;
            } else {
                return input * 100 + "%";
            }
        }
    })

HTML code:

<h1 ng-repeat="x in records|filterOutput">{{x}}</h1>

I want output:

"19%""C:13%""C:19.6%|D:23%"

But console.log:

TypeError: input.indexOf is not a function

What should I do? How to split the data in AngularJS?

I'm wondering how your statement $scope.records={"0.19","C:0.13","C:0.196|D:0.23"} executed ? Moreover indexOf works for array and string. do a console.log below $scope.records={"0.19","C:0.13","C:0.196|D:0.23"} or {{records}} on html to see if it has anything in records — Vinod Louis
– Vinod Louis, Commented Dec 7, 2016 at 9:33
The problem there is that you have an object and not an array indexOf works on arrays and strings. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Playdome.io
– Playdome.io, Commented Dec 7, 2016 at 9:35
$scope.records itself is not a valid json, it cannot be used with ng-repeat. ng-repeat needs an array to repeat not an object. — Supradeep
– Supradeep, Commented Dec 7, 2016 at 9:40

Félix Adriyel Gagnon-Grenier · Accepted Answer · 2016-12-08 03:58:35Z

2

I have modified your code to get the desired output.

Html code

<h1 ng-repeat="x in records track by $index">{{x|filterOutput}}</h1>

Variable value

$scope.records=["0.19","C:0.13","C:0.196|D:0.23"];

AngularJS Filter

.filter('filterOutput', function () {
    return function (input) {
        if (input.indexOf(":") != -1) {
            var out = input
                .split('|')
                .map(function (v) {
                    var s = v.split(':')
                    return s[0] + ':' + (Number(s[1]) * 100) + "%"
                })
                .join('|')
            return out;
        } else {
            return input * 100 + "%";
        }
    }
})

edited Dec 8, 2016 at 3:58

Félix Adriyel Gagnon-Grenier

8,94510 gold badges58 silver badges69 bronze badges

answered Dec 7, 2016 at 10:19

Manoj Gupta

813 bronze badges

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

2 Comments

Alan Over a year ago

Thank you . And I do this in your js ` var _input=input+"" ` .It can also solve mypromble.Can I ask you another question~ I hava one data C:0.28then the output is 28.000000000000000004% I think I didn't deal with some of the details.

Manoj Gupta Over a year ago

if you want to restrict the decimal points then you can use .toFixed(decimal_point value) to variable which is holding the number value. You can use below mentioned code in the filter for return return s[0] + ':' + (Number(s[1]) * 100).toFixed(2) + "%"

Supradeep · Accepted Answer · 2016-12-07 10:00:14Z

I've modified your code to get the expected result as mentioned, Please check the code below. I've created a fiddle for better understanding here

Controller:

.controller('FilterController', function ($scope) {
  $scope.records = ["0.19","C:0.13","C:0.196|D:0.23"];
});

Filter :

.filter('filterOutput', function () {
        return function (inputArray) {
         return inputArray.map(function (input){
                 if (input.indexOf(":") != -1) {
                var out = input
                    .split('|')
                    .map(function (v) {
                        var s = v.split(':')
                        return s[0] + ':' + (Number(s[1]) * 100) + "%"
                    })
                    .join('|')
                return out;
            } else {
                return input * 100 + "%";
            }
         });
        }
    });

Collectives™ on Stack Overflow

How to split the data in AngularJS?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related