时间戳

首页 > 解决方案 > 将复杂数据属性推入一个数组的问题

javascript - 将复杂数据属性推入一个数组的问题

问题描述

我正在做下面的演示。如何将年龄属性中的所有数据加载到一个数组中，看起来像这样？

 out = [48,14,139,49,15,135,51,15,140,49,15,135,51,15,140,52,16,141] 


let agesindx =[];
$(".box").each(function(){
    //agesindx.push($(this).data('ages').split(','));
    agesindx.push($(this).data('ages'));
  });
 console.log(agesindx);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box" data-ages="[48, 14, 139]"></div>
<div class="box" data-ages="[49,15,135],[51,15,140]"></div>
<div class="box" data-ages="[49,15,135],[51,15,140],[52,16,141]"></div>

标签： javascriptjqueryarrays

解决方案

data-ages应该是一个数组数组，如data-ages="[[48, 14, 139]]"

用于flat()获取串联的子数组元素

let agesindx = [];
$(".box").each(function() {
  agesindx.push($(this).data('ages'));
});
console.log(agesindx.flat());
console.log(agesindx.flat(2));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box" data-ages="[[48, 14, 139]]"></div>
<div class="box" data-ages="[[49,15,135],[51,15,140]]"></div>
<div class="box" data-ages="[[49,15,135],[51,15,140],[52,16,141]]"></div>

或者

使用JSON.parse()

let agesindx = [];
$(".box").each(function() {
  agesindx.push(JSON.parse('[' + $(this).data('ages').toString() + ']'));
});
console.log(agesindx);
console.log(agesindx.flat(2));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box" data-ages="[48, 14, 139]"></div>
<div class="box" data-ages="[49,15,135],[51,15,140]"></div>
<div class="box" data-ages="[49,15,135],[51,15,140],[52,16,141]"></div>

推荐阅读