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

2019-04-15 06:47:16 +00:00
Commented Apr 15, 2019 at 6:47 — User863
– User863, Commented Apr 15, 2019 at 6:47

Kaushik · Accepted Answer · 2019-04-15 06:55:34Z

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, 2019 at 6:55

answered Apr 15, 2019 at 6:54

Kaushik

2,0901 gold badge24 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RichS Over a year ago

Close. I think the OP wants the strings converted to numbers.

briosheje Over a year ago

OP can convert these later, if he/she needs them as number: console.log(agesindx.join().split(',').map(i => +i));

User863 · Accepted Answer · 2019-04-15 07:01:01Z

2

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>

edited Apr 15, 2019 at 7:01

answered Apr 15, 2019 at 6:52

User863

20.1k3 gold badges20 silver badges45 bronze badges

3 Comments

RichS Over a year ago

I think the OP wants the array flattened slightly further.. to 1D.

Mona Coder Over a year ago

Thanks Aswin, this good but I am getting the data from database in that format!

User863 Over a year ago

@MonaCoder You can use a JSON.parse method

kukkuz · Accepted Answer · 2019-04-15 07:05:01Z

1

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>

answered Apr 15, 2019 at 7:05

kukkuz

42.5k6 gold badges65 silver badges103 bronze badges

2 Comments

kukkuz Over a year ago

@MonaCoder adding on to the other answers, see another option if you have proper arrays in your data attribute...

RichS Over a year ago

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)

Auran Buckles · Accepted Answer · 2019-04-15 07:04:20Z

0

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>

answered Apr 15, 2019 at 7:04

Auran Buckles

311 silver badge5 bronze badges

Comments

Kamalesh M. Talaviya · Accepted Answer · 2019-04-15 07:19:11Z

0

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>

answered Apr 15, 2019 at 7:19

Kamalesh M. Talaviya

1,4201 gold badge14 silver badges27 bronze badges

Comments

RichS · Accepted Answer · 2019-04-15 07:30:50Z

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

Collectives™ on Stack Overflow

Issue on pushing complex data attributes into one array

6 Answers 6

2 Comments

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related