Issue on pushing complex data attributes into one array

Question

I am working on the demo below. How can I load all of data in the age attributes into one array, so it looks like this?

 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>

`data-ages` should be `"[[49,15,135],[51,15,140]]"` – User863 Apr 15 '19 at 06:47 — User863, Apr 15 '19 at 06:47

User863 · Answer 1 · 2019-04-15T07:01:01.287

data-ages should be an array of arrays like data-ages="[[48, 14, 139]]"

Use flat() to get a concatenated sub-array elements

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>

OR

using 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>

I think the OP wants the array flattened slightly further.. to 1D. — RichS, Apr 15 '19 at 06:53
Thanks Aswin, this good but I am getting the data from database in that format! — Mona Coder, Apr 15 '19 at 06:54

Kaushik · Accepted Answer · 2019-04-15T06:55:34.327

2

You can use the JSON.parse to parse your array from the string. Then you'll get an array inside a array and so on. So at end you can do join and split that will give you a single array.

let agesindx =[];
$(".box").each(function(){
    //agesindx.push($(this).data('ages').split(','));
    let x = JSON.parse('['+$(this).data('ages')+']');
    // console.log(JSON.parse('['+$(this).data('ages')+']'));
    agesindx.push(x);
  });
  
 console.log(agesindx.join().split(',') );

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

edited Apr 15 '19 at 06:55

answered Apr 15 '19 at 06:54

Kaushik

2,072
1
23
31

1

Close. I think the OP wants the strings converted to numbers. – RichS Apr 15 '19 at 06:55
1

OP can convert these later, if he/she needs them as number: `console.log(agesindx.join().split(',').map(i => +i));` – briosheje Apr 15 '19 at 07:00

score 1 · Answer 3 · answered Apr 15 '19 at 07:05

If you have proper arrays in your data-ages attribute like [[49,15,135],[51,15,140]] you can get an array of arrays using map() function on the box element list. Then you can use $.map to flatten it - see demo below:

let result = $.map($(".box").map(function() {
  return $(this).data('ages');
}).get(), function(e) {
  return e;
});
console.log(result);

.as-console-wrapper{top:0;max-height:100%!important;}

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

Shortened in ES6:

let result = $.map($(".box").map((idx, el) => $(el).data('ages')).get(), e => e);
console.log(result);

.as-console-wrapper{top:0;max-height:100%!important;}

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

@MonaCoder adding on to the other answers, see another option if you have proper arrays in your data attribute... — kukkuz, Apr 15 '19 at 07:13
And, fwiw (I may be stating the obvious but...), the code snippet shown here *also* works when the data of the first element is also structured as a 2-D array: `data-ages="[[48, 14, 139]]"` (i.e., double brackets on the end) — RichS, Apr 15 '19 at 07:29

score 0 · Answer 4 · answered Apr 15 '19 at 07:04

push was not adding the individual integers to the array because the latter two data ages were strings. You can use regex to extract just the digits and form an array with match, push to agesindx, then flatten the resulting nested array at the end.

let agesindx =[];
$(".box").each(function(){
    let ages = String($(this).data('ages')).match(/\d+/g);
    agesindx.push(ages);
});
console.log(agesindx.flat());

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

score 0 · Answer 5 · answered Apr 15 '19 at 07:19

Well You can use JSON.parse to get data as array and then to concat use concat like here : Merge/flatten an array of arrays

$(document).ready(function(){
  var dataList = $(".box").map(function() {
    return JSON.parse('['+ $(this).data("ages")+']');
  }).get();
  
  var merged = [].concat.apply([], dataList);
  console.log(merged);
});

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

RichS · Answer 6 · 2019-04-15T07:30:50.310

This code solves the OP's question exactly as asked, in the output format shown, without requiring modification to the html data attributes:

let agesindx =[];
$(".box").each(function(){
    var tmpArr = $(this).data('ages')
    if( typeof tmpArr == 'string' )
     tmpArr = JSON.parse(tmpArr.replace(/\]\,\[/g, ','));
    agesindx = agesindx.concat(tmpArr); 
  });
 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>

If, however, the data type consistency could be ensured to the same for each element, the code could probably be better at flattening it (re: kukkuz's answer).

Issue on pushing complex data attributes into one array

6 Answers6