how to use .map() in nodelist in javascript?

user_10501818 0
Viewed 11328

Why am i getting this error? How can i access and print the nodes when i'm selecting the <li> tags with querySelectorAll?

script.js:14 Uncaught TypeError: list.map is not a function

HTML

<ul class="wrapper1" id="testDiv">
        <li class="cake">Carrots</li>
        <li class="cake">Cake</li>
        <li class="cake">Wheat</li>
        <li class="cake">Balloons</li>
    </ul>

JS

 let list = document.querySelectorAll("li");
        let items = list.map(elem => {
      console.log(elem);
    })
javascript
5 Answers

querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors. Use array#from to convert NodeList to array then iterate through array#map.

let list = document.querySelectorAll("li");
let items = Array.from(list).map(elem => {
  console.log(elem);
})
<ul class="wrapper1" id="testDiv">
    <li class="cake">Carrots</li>
    <li class="cake">Cake</li>
    <li class="cake">Wheat</li>
    <li class="cake">Balloons</li>
</ul>

user_47584940

In addition to Itang and Foo's suggestion, you can also use:

[].concat(document.querySelectorAll("li")).map((el) => { console.log(el); })

In fairness I think Foo's suggestion using spread syntax Is probably the most elegant, I'm just not sure how widely the spread operator is supported for NodeLists. (pasted below for reference)

[...document.querySelectorAll('li')].map((el) => { console.log(el); })
user_7026640

If you're using ES6, you can use [...selectors] syntax, like this:

let getMappingList = function (list) {
  console.log(typeof list);

  for (let item of list) {
    console.log(item);
  }
  
  console.log("___________________");
  
  list.map(item => console.log(item));
};

getMappingList([...document.querySelectorAll("li")]);
<ul class="wrapper1" id="testDiv">
    <li class="cake">Carrots</li>
    <li class="cake">Cake</li>
    <li class="cake">Wheat</li>
    <li class="cake">Balloons</li>
</ul>

After getting the list, we can also use map function, or looping the list using for...of... syntax.

Array(...selectors) is the same way to use:

let getMappingList = function (list) {
  console.log(typeof list);

  for (let item of list) {
    console.log(item);
  }
  
  console.log("___________________");
  
  list.map(item => console.log(item));
};

getMappingList(Array(...document.querySelectorAll("li")));
<ul class="wrapper1" id="testDiv">
    <li class="cake">Carrots</li>
    <li class="cake">Cake</li>
    <li class="cake">Wheat</li>
    <li class="cake">Balloons</li>
</ul>

user_105505490

I know this is an old thread but listed as #1 on Google search result. So here is an alternative to those in need.

let items = [].map.call(list, item => console.log(item));
user_28061030

I encountered the question of how to use a nodelist (result of document.querySelectorAll) with .map on my project and solved it by using a SPREAD operator to create an array from the nodelist.

Learning as I go so don't hesitate to correct me. It's weird that modern browsers can directly execute a foreach function to a nodelist but not map.

let list = document.querySelectorAll("li");
let items = [...list].map(elem => {
  console.log(elem);
})
<ul class="wrapper1" id="testDiv">
    <li class="cake">Carrots</li>
    <li class="cake">Cake</li>
    <li class="cake">Wheat</li>
    <li class="cake">Balloons</li>
</ul>

edit : understood how snippets work / SPREAD not REST

user_115502780
Related