trying to push each element with comma separated values also as an array element

Question

I have the below json object.

$scope.myDataList = [
  {name:"one,two"},
  {name:"three"},
  {name:"four"},
  {name:"five,eight,nine"}
]

I'm iterating the list and push the elements in the array as shown below.

$scope.myArray = new Array();
angular.forEach($scope.myDataList, function (value, key) { 
  $scope.myArray.push(value.name); 
});

I want to push each element with comma spearated values also in the array. example:
When I print $scope.myArray[0] , it prints one,two .
But expected result is I want to print one for $scope.myArray[0] and two for $scope.myArray[1] , three for $scope.myArray[2] .

Each value with comma separation also I want to push as an array element.
I tried as below but does not work.

var array = $scope.myArray.split(',');

Demo: http://plnkr.co/edit/q36BQeqsj5GVNkP4PPhq?p=preview

Answer 1

You need to split the name and concatenate the result to the array instead:

angular.forEach($scope.myDataList, function (value, key) { 
  $scope.myArray = $scope.myArray.concat(value.name.split(',')); 
});

Answer 2

Your problem has nothing to do with AngularJS , so I rewrote it in plain JavaScript:

 $scope = {}; $scope.myDataList = [{name:"one,two"},{name:"three"},{name:"four"},{name:"five,eight,nine"}] $scope.myArray = $scope.myDataList.map(({ name }) => name.split(',')) .reduce((result, splitElement) => result.concat(splitElement), []); console.log($scope.myArray); 

Note that the following line in your code

$scope.myArray.push(value.name);

pushes unsplit strings like 'five,eight,nine' into $scope.myArray . This is not what you want. Also, $scope.myArray.split(',') will fail, since Array.prototype has no split function.

One way to achieve the correct result is to map over the original array and split every element (the result is an array of string arrays). After that, you can join the inner string arrays together using Array.concat . This is what the following two lines do:

$scope.myArray = $scope.myDataList.map(({ name }) => name.split(','))
     .reduce((result, splitElement) => result.concat(splitElement), []);

Answer 3

Here's a fairly simple means:

$scope.myArray = $scope.myDataList.reduce((a, {name}) => a.concat(name.split(',')), [])

Note that what you're trying to do is take the orginal list and create a new one. Since it's not a one-for-one mapping, it's not map . But reduce is appropriate, and carries more information than forEach .

 const $scope = { myDataList: [ {name:"one,two"}, {name:"three"}, {name:"four"}, {name:"five,eight,nine"} ] } $scope.myArray = $scope.myDataList.reduce((a, {name}) => a.concat(name.split(',')), []) console.log($scope) 

Answer 4

while pushing the array element you can do:

 $scope.myArray = $scope.myArray.concat(value.name.split(",")); 

Here is the code to try. http://plnkr.co/edit/nc91XI4vPJT0nEZvmMzU?p=preview