Search code examples
javascriptnodelist

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.

Solution

  • 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.