尝试将逗号分隔值的每个元素也作为数组元素推送

时间:2018-08-24 13:56:36

标签: javascript angularjs

我有下面的json对象。

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

我要遍历列表,并按如下所示将数组中的元素推入。

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

我也要在数组中推送带有逗号分隔值的每个元素。 例如:
当我打印$scope.myArray[0]时,它会打印one,two
但是预期的结果是我要打印one {{1}的$scope.myArray[0]two$scope.myArray[1]的三个。

每个带有逗号分隔的值也想作为数组元素推送。
我尝试了如下操作,但不起作用。

$scope.myArray[2]

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

4 个答案:

答案 0 :(得分:1)

您需要拆分name并将结果连接到数组:

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

答案 1 :(得分:1)

您的问题与 AngularJS 无关,所以我用纯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);

请注意,代码中的以下行

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

'five,eight,nine'之类的未分割字符串插入$scope.myArray中。这不是您想要的。另外,由于$scope.myArray.split(',')没有Array.prototype功能,split将失败。

获得正确结果的一种方法是映射到原始数组并拆分每个元素(结果是字符串数组的数组)。之后,您可以使用Array.concat将内部字符串数组连接在一起。这是以下两行的内容:

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

答案 2 :(得分:1)

这是一个相当简单的方法:

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

请注意,您要执行的操作是获取原始列表并创建一个新列表。由于它不是一对一的映射,因此不是map。但是reduce是适当的,并且比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)

答案 3 :(得分:0)

在推动数组元素的同时,您可以执行以下操作:

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

这是尝试的代码。 http://plnkr.co/edit/nc91XI4vPJT0nEZvmMzU?p=preview