繁体   English   中英

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

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

我有下面的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
但是预期的结果是我想为$scope.myArray[0]打印one ,为$scope.myArray[1]打印two ,为$scope.myArray[2]三个。

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

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

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

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

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

您的问题与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), []);

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

$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) 

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

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM