Extract nodeList item ids as an array with array map

Question

I want to save a set of ids based on a nodeList returned by a querySelector.

I achieved it with a very procedural approach, thinking in terms of steps.

Select items
Create an array
Iterate over items
Get the id
Push it into the array

const getThem = document.querySelectorAll('.get-me');

let arrayOfData = [];

Array.prototype.forEach.call (getThem, function (node){
    arrayOfData.push(node.id);
});

console.log(arrayOfData);

<ul>
<li class="get-me" id="one">One</li>
<li class="get-me" id="two">Two</li>
<li class="get-me" id="three">Three</li>
</ul>

I wonder if I can get this done with array map, to reduce the amount of lines and also take advantage of modern Javascript features.

I tried with:

const getThem = document.querySelectorAll('.get-me');
Array.prototype.map.call(getThem, (item) => ({ [id]: item.id }));
console.log(getThem);

But it doesn't work.

NodeLists don't have a .map(..) function but you can convert it to an array pretty easily, something like [...getThem]. Here is a complete example: [...getThem].map((node) => node.id) — Titus
– Titus, Commented Dec 11, 2022 at 11:58

Nick Parsons · Accepted Answer · 2022-12-11 12:40:29Z

Unfortunately, the NodeList that is returned by .querySelectorAll() doesn't have a .map() method. However, as it is iterable, you can pass it to Array.from(), and use the second mapping argument to perform your mapping:

const getThem = document.querySelectorAll('.get-me');
const arrayOfData = Array.from(getThem, node => node.id);
console.log(arrayOfData);

<ul>
  <li class="get-me" id="one">One</li>
  <li class="get-me" id="two">Two</li>
  <li class="get-me" id="three">Three</li>
</ul>

This does two things in one go, it converts your NodeList to an array, and it performs the mapping based on the second argument. This is opposed to doing something like Array.from(getThem).map(...) and [...getThem].map(...) which both do two iterations over your items.

I tried with:

const getThem =
document.querySelectorAll('.get-me');
Array.prototype.map.call(getThem, (item) => ({ [id]: item.id }));
console.log(getThem);

But it doesn't work.

This does also work, you just need to store the return value in a variable a log that. .map() doesn't change the original array, it returns a new one instead:

const getThem = document.querySelectorAll('.get-me');
const res = Array.prototype.map.call(getThem, (item) => item.id);
console.log(res);

<ul>
  <li class="get-me" id="one">One</li>
  <li class="get-me" id="two">Two</li>
  <li class="get-me" id="three">Three</li>
</ul>

A l w a y s S u n n y · Accepted Answer · 2022-12-11 12:54:02Z

1

Another way to do it using spread operator and array map like below

const getThem = document.querySelectorAll('.get-me');
const nodes = [...getThem];

const arrayOfData = nodes.map(node => node.id);

console.log(arrayOfData);

<ul>
  <li class="get-me" id="one">One</li>
  <li class="get-me" id="two">Two</li>
  <li class="get-me" id="three">Three</li>
</ul>

edited Dec 11, 2022 at 12:54

answered Dec 11, 2022 at 12:01

A l w a y s S u n n y

38.8k9 gold badges68 silver badges120 bronze badges

1 Comment

Álvaro Franz Over a year ago

Thanks a lot, really appreciate it. I'll accept the other answer because it was first. But the real accepted answer should be both combined. :-)

Yosvel Quintero · Accepted Answer · 2022-12-11 12:05:30Z

0

You can do:

const elems = document.querySelectorAll('.get-me')
const arrayOfData = Array.from(elems).map(({ id }) => id)

console.log(arrayOfData)

<ul>
  <li class="get-me" id="one">One</li>
  <li class="get-me" id="two">Two</li>
  <li class="get-me" id="three">Three</li>
</ul>

answered Dec 11, 2022 at 12:05

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

Collectives™ on Stack Overflow

Extract nodeList item ids as an array with array map

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related