CODEWITHSUNDEEP
javascriptnodelist
Zuzim
Zuzim

Reputation: 85

How do I extract data from this NodeList?

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:

enter image description here

And this is what it logs:

enter image description here

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 (?), compare to the previous image of the log on line 173: enter image description here

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.

Upvotes: 1

Views: 11435

Answers (3)

ikos23
ikos23

Reputation: 5354

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.

Upvotes: 3

Sachintha Nayanajith
Sachintha Nayanajith

Reputation: 721

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

Upvotes: 0

MOUTAIROU Bastou Abdel
MOUTAIROU Bastou Abdel

Reputation: 159

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.org/en-US/docs/Web/API/NodeList/values][1]

Upvotes: 0

Related Questions