how to form an array of arrays with data

Question

I need to create an array of arrays like this:

var serviceCoors = [
    [50, 40],
    [50, 50],
    [50, 60],
];

from elements with datas:

<div data-latitude="10" data-longitude="20" class="service-points__map"></div>
<div data-latitude="20" data-longitude="10" class="service-points__map"></div>

I`m trying this:

var test = [];
$('.service-points__map').each(function () {
    var test2 = $(this).contents();
    var items = [];
    $.each(test2, function(i, val) {
        items.push(val.data);
    });
    test.push(items);
});

But it doesn't work. I have 2 arrays, but they are empty.

Praveen Kumar Purushothaman · Accepted Answer · 2021-11-29 11:56:28Z

2

Oh, what you did is... var test2 = $(this).contents(); is not the right thing you need to use. You should be using .data() and destructure the object:

var test = [];
$('.service-points__map').each(function() {
  var { longitude, latitude } = $(this).data();
  test.push([longitude, latitude]);
});
console.log(test);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-latitude="10" data-longitude="20" class="service-points__map"></div>
<div data-latitude="20" data-longitude="10" class="service-points__map"></div>

I got the output as:

[
  [ 20, 10 ],
  [ 10, 20 ]
]

answered Nov 29, 2021 at 11:56

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

Comments

Andy · Accepted Answer · 2021-11-29 12:18:43Z

Initially I was going to suggest jQuery's map method but - by design apparently - it automatically flattens the output which can only be solved by nesting your coordinates in another array. It also seems like it automatically coerces strings to numbers which is useful in your case but it seems to be making a lot of decisions that you might not want.

const out = $('div').map((i, el) => {
  const { latitude, longitude } = $(el).data();
  return [[ latitude, longitude ]];
}).toArray();

console.log(out);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-latitude="10" data-longitude="20" class="service-points__map"></div>
<div data-latitude="20" data-longitude="10" class="service-points__map"></div>

Native JS doesn't have this problem. Just pick up the elements, and iterate over them returning the new array of nested coordinates.

const divs = document.querySelectorAll('div');

const coords = Array.from(divs).map(div => {
  const { latitude, longitude } = div.dataset;
  return [ +latitude, +longitude ];
});

console.log(coords);

<div data-latitude="10" data-longitude="20" class="service-points__map"></div>
<div data-latitude="20" data-longitude="10" class="service-points__map"></div>

Additional documentation

Destructuring assignment

DziobatyPelikan · Accepted Answer · 2021-11-29 12:52:35Z

0

Alternatively, you can use plain JS instead of jQuery. All you need to do is to get elements, iterate over them, create an array of the attributes of each item, and push it into the test array.

const test = [];
const items = document.querySelectorAll('.service-points__map');
items.forEach(item => {
  test.push([
    parseInt(item.getAttribute('data-latitude')),
    parseInt(item.getAttribute('data-longitude')),
  ]);
});

console.log(test);

<div data-latitude="10" data-longitude="20" class="service-points__map"></div>
<div data-latitude="20" data-longitude="10" class="service-points__map"></div>

edited Nov 29, 2021 at 12:52

answered Nov 29, 2021 at 12:29

DziobatyPelikan

12 bronze badges

1 Comment

law_81 Over a year ago

Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See How to Answer.

Collectives™ on Stack Overflow

how to form an array of arrays with data

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related