I need to extract a particular data property from a NodeList. I have no problems getting data from arrays or objects in general, but this NodeList is beyond me! It doesn't work even if I use Array.from() to turn it into an array.

This is the relevant code:

And this is what it logs:

In the log on line 173, the closed arrays contain all the data I need, but I simply don't understand how to go there. When I try to go to an index there it just opens up the path coordinates.

I will also add the code image as text, it doesn't have any lines though:

let test = d3.selectAll(".unit")
    console.log(test)
    console.log(test._groups)
    console.log(test._groups[0])
    console.log(test._groups[0][0])

EDIT: To be more specific, the data I need is a "data" property inside the array below the nodelist (?), pare to the previous image of the log on line 173:

EDIT2: To be even more clear: When I open the nodelist in the console, I also get an array, and it is only the array that interests me. I don't understand this data structure, how the array is related to the nodelist, but I have tried to access the indexes of the array in a variety of ways and nothing has worked.

I need to extract a particular data property from a NodeList. I have no problems getting data from arrays or objects in general, but this NodeList is beyond me! It doesn't work even if I use Array.from() to turn it into an array.

This is the relevant code:

And this is what it logs:

In the log on line 173, the closed arrays contain all the data I need, but I simply don't understand how to go there. When I try to go to an index there it just opens up the path coordinates.

I will also add the code image as text, it doesn't have any lines though:

let test = d3.selectAll(".unit")
    console.log(test)
    console.log(test._groups)
    console.log(test._groups[0])
    console.log(test._groups[0][0])

EDIT: To be more specific, the data I need is a "data" property inside the array below the nodelist (?), pare to the previous image of the log on line 173:

EDIT2: To be even more clear: When I open the nodelist in the console, I also get an array, and it is only the array that interests me. I don't understand this data structure, how the array is related to the nodelist, but I have tried to access the indexes of the array in a variety of ways and nothing has worked.

• javascript
• nodelist

Share Improve this question Follow edited Sep 18, 2020 at 11:44 Zuzim asked Sep 18, 2020 at 9:45 ZuzimZuzim 8511 gold badge44 silver badges1212 bronze badges 4

• What data exactly do you need? The last line shows a path element, which is what the arrays contain. – Guy Incognito Commented Sep 18, 2020 at 11:05
• I edited the post and added a more specific image at the bottom. Will check out the answers below now to see if it helps me. – Zuzim Commented Sep 18, 2020 at 11:29
• Those are element properties so test._groups[0][0] contains that data. E.g. console.log(test._groups[0][2].ariaAtomic) prints the first property shown on the screenshot. – Guy Incognito Commented Sep 18, 2020 at 11:37
• No, test._groups[0][0] is exactly what I tried above, and it only outputs a path with coordinates. test._groups[0][2].ariaAtomic gives an error "Expected an assignment or function call and instead saw an expression". – Zuzim Commented Sep 18, 2020 at 11:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

NodeList objects are collections of nodes. In some cases, the NodeList is live, which means that changes in the DOM automatically update the collection. In other cases, the NodeList is static, where any changes in the DOM does not affect the content of the collection. The document.querySelectorAll() method returns a static NodeList, for instance.

It's possible to loop over the items in a NodeList using a for loop:

for (let i = 0; i < myNodeList.length; i++) {
  let item = myNodeList[i];
}

for...of loops will loop over NodeList objects correctly:

const list = document.querySelectorAll('input[type=checkbox]');
for (let checkbox of list) {
  checkbox.checked = true;
}

You can use item() method to get an item by its index. For instance, this is how you can get id of the first <div> on some page:

document.querySelectorAll("div").item(0).id

In your case, you have an array and it contains an element of type NodeList. So, when you do test._groups[0] you get the first element of your array and this element is NodeList and you need to work with it as with NodeList (see above)! For instance:

const arr = [1,2]; // simple array
// arr[0] is 1.
// in your case you have an array, but elements in that array are of type NodeList 
// (that's why console shows something like [NodeList(...)])

// when you get something from your array - it will be NodeList
// hence you can iterate over it or get some particular item like
test._groups[0].item(0).ariaAtomic

There are a lot more useful methods. Check docs for more details.

To extrat data from nodeList you must loop your node list and the stock nodList elemnts in otheer tab

var list = node.childNodes; 

// Using for..of 
for(var value of list.values()) { 
  console.log(value); 
}

[check this link https://developer.mozilla/en-US/docs/Web/API/NodeList/values][1]

NodeList objects are collections of nodes.

You can loop through a node list by using the NodeList.length property and read the innerHTML of it as follows.

And refer the document for more knowlege

var items = document.getElementsByTagName("p");

var gross = "";
for (var i = 0; i < items.length; i++) {
   gross += items[i].innerHTML;
}

and also you can loop through the