Utilizing Array.from with a XPathResult: A Comprehensive Guide

Question

Utilizing Array.from with a XPathResult: A Comprehensive Guide

In my sample document, I found 138 nodes with the tag td using querySelectorAll.

Array.from(document.querySelectorAll('td')).length
138

However, when I tried to do the same using XPath, I did not get any result:

Array.from(document.evaluate(".//td", document.body, null, XPathResult.ANY_TYPE, null)).length
0

Despite this, there is at least one match:

document.evaluate(".//td", document.body, null, XPathResult.ANY_TYPE, null).iterateNext().nodeName
"TD"

The issue seems to be that Array.from cannot handle a XPathResult. Even when trying to iterate over it directly, I still get 0 results:

Array.from(document.evaluate('.', document.body, null, XPathResult.ANY_TYPE, null)).length
0

Is there a way to make a XPathResult compatible with Array.from?

javascript arrays xpath

Answer 1

Answer №1

Sorry, it is not possible to use Array.from with XPathResult objects because they do not meet the criteria for conversion:

They are not "array-like" and do not have a .length property.
They do not implement the iterator protocol which is required for conversion to an array.

To convert a XPathResult object to an array, you would need to manually iterate over the results and store them in an array like this:

const nodes = [];
let node = xPathResult.iterateNext();
while (node) {
  nodes.push(node);
  node = xPathResult.iterateNext();
}

However, if you are already looping over the nodes, you can likely perform any necessary array operations within that loop instead.

Answer 2

Sorry, it is not possible to use Array.from with XPathResult objects because they do not meet the criteria for conversion:

They are not "array-like" and do not have a .length property.
They do not implement the iterator protocol which is required for conversion to an array.

To convert a XPathResult object to an array, you would need to manually iterate over the results and store them in an array like this:

const nodes = [];
let node = xPathResult.iterateNext();
while (node) {
  nodes.push(node);
  node = xPathResult.iterateNext();
}

However, if you are already looping over the nodes, you can likely perform any necessary array operations within that loop instead.

Answer 3

Answer №2

Expanding on the solution provided by this post authored by @JamesTheAwesomeDude, you have the option to utilize Array.from (or leverage the spread operator) after implementing an iterator onto XPathResult. This custom iterator offers enhanced functionality as it can handle various types of XPathResult objects:

if (!XPathResult.prototype[Symbol.iterator]) XPathResult.prototype[Symbol.iterator] = function* () {
    switch (this.resultType) {
        case XPathResult.UNORDERED_NODE_ITERATOR_TYPE:
        case XPathResult.ORDERED_NODE_ITERATOR_TYPE:
            let result;
            while ((result = this.iterateNext()) != null ) yield result;
            break;
        case XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE:
        case XPathResult.ORDERED_NODE_SNAPSHOT_TYPE:
            for (let i=0; i < this.snapshotLength; i++) yield this.snapshotItem(i);
            break;
        default:
            yield this.singleNodeValue;
            break;
    }
};

Answer 4

Expanding on the solution provided by this post authored by @JamesTheAwesomeDude, you have the option to utilize Array.from (or leverage the spread operator) after implementing an iterator onto XPathResult. This custom iterator offers enhanced functionality as it can handle various types of XPathResult objects:

if (!XPathResult.prototype[Symbol.iterator]) XPathResult.prototype[Symbol.iterator] = function* () {
    switch (this.resultType) {
        case XPathResult.UNORDERED_NODE_ITERATOR_TYPE:
        case XPathResult.ORDERED_NODE_ITERATOR_TYPE:
            let result;
            while ((result = this.iterateNext()) != null ) yield result;
            break;
        case XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE:
        case XPathResult.ORDERED_NODE_SNAPSHOT_TYPE:
            for (let i=0; i < this.snapshotLength; i++) yield this.snapshotItem(i);
            break;
        default:
            yield this.singleNodeValue;
            break;
    }
};

Answer 5

Answer №3

The current answer clarifies that this is not exactly "supported" because, for some strange reason, the XPathResult does not adhere to JS' standard iteration protocols.

If needed, you can create a custom solution that aligns with your specific use-case using Array.from:

function convertXPathToIterator (xpr) {
  // Generate a JavaScript iterator for an *ITERATOR_TYPE XPathResult
  // or a JavaScript iterable for a *SNAPSHOT_TYPE XPathResult
  switch (xpr.resultType) {
    case XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE:
    case XPathResult.ORDERED_NODE_SNAPSHOT_TYPE:
      return {
        [Symbol.iterator] () {
          var i = 0;
          return {
            next() {
              var node = xpr.snapshotItem(i++);
              return {value: node, done: !node};
            }
          };
        },
        at(i) {
          return xpr.snapshotItem(i) || undefined;
        }
      };
    case XPathResult.UNORDERED_NODE_ITERATOR_TYPE:
    case XPathResult.ORDERED_NODE_ITERATOR_TYPE:
      return {
        next() {
          var node = xpr.iterateNext();
          return {value: node, done: !node};
        },
        [Symbol.iterator] () {
          return this;
        },
      };
  }
}


// For example, extract the top child elements
let sample_xpr = document.evaluate('/html/*', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);
// Convert into an Array:
let converted_arr = Array.from(convertXPathToIterator(sample_xpr));

// Can be converted to an array!
console.log("length:", converted_arr.length);
console.log("map demo (e => e.tagName):", converted_arr.map(e => e.tagName));

...also, it directly supports for...of without needing to create an entire Array:

function convertXPathToIterator (xpr) {
  // Generate a JavaScript iterator for an *ITERATOR_TYPE XPathResult
  // or a JavaScript iterable for a *SNAPSHOT_TYPE XPathResult
  switch (xpr.resultType) {
    case XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE:
    case XPathResult.ORDERED_NODE_SNAPSHOT_TYPE:
      return {
        [Symbol.iterator] () {
          var i = 0;
          return {
            next() {
              var node = xpr.snapshotItem(i++);
              return {value: node, done: !node};
            }
          };
        },
        at(i) {
          return xpr.snapshotItem(i) || undefined;
        }
      };
    case XPathResult.UNORDERED_NODE_ITERATOR_TYPE:
    case XPathResult.ORDERED_NODE_ITERATOR_TYPE:
      return {
        next() {
          var node = xpr.iterateNext();
          return {value: node, done: !node};
        },
        [Symbol.iterator] () {
          return this;
        },
      };
  }
}

let another_sample_xpr = document.evaluate('/html/*', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);

for( let e of convertXPathToIterator(another_sample_xpr) ) {
  // It's iterable!
  console.log(e.tagName);
}

Hence, this approach is more versatile (and may consume slightly less memory when dealing with extremely large numbers of nodes without initializing an Array).

In my test document, I found a total of 138 td nodes.

Just in case you are primarily interested in counting the number of matches, you can retrieve it directly using the .snapshotLength property for non-iterator types (or manually count for iterator types if preferred):

function convertXPathToIterator (xpr) {
  // Generate a JavaScript iterator for an *ITERATOR_TYPE XPathResult
  // or a JavaScript iterable for a *SNAPSHOT_TYPE XPathResult
  switch (xpr.resultType) {
    case XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE:
    case XPathResult.ORDERED_NODE_SNAPSHOT_TYPE:
      return {
        [Symbol.iterator] () {
          var i = 0;
          return {
            next() {
              var node = xpr.snapshotItem(i++);
              return {value: node, done: !node};
            }
          };
        },
        at(i) {
          return xpr.snapshotItem(i) || undefined;
        }
      };
    case XPathResult.UNORDERED_NODE_ITERATOR_TYPE:
    case XPathResult.ORDERED_NODE_ITERATOR_TYPE:
      return {
        next() {
          var node = xpr.iterateNext();
          return {value: node, done: !node};
        },
        [Symbol.iterator] () {
          return this;
        },
      };
  }
}

let final_sample_xpr = document.evaluate('/html/*', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);

let match_count = final_sample_xpr.snapshotLength;

console.log("number of matches:", match_count);


let final_iterator_xpr = document.evaluate('/html/*', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE);

let manual_match_count = 0;
for( let e of convertXPathToIterator(final_iterator_xpr) )
  manual_match_count ++;

console.log("number of matches:", manual_match_count);

Answer 6

The current answer clarifies that this is not exactly "supported" because, for some strange reason, the XPathResult does not adhere to JS' standard iteration protocols.

If needed, you can create a custom solution that aligns with your specific use-case using Array.from:

function convertXPathToIterator (xpr) {
  // Generate a JavaScript iterator for an *ITERATOR_TYPE XPathResult
  // or a JavaScript iterable for a *SNAPSHOT_TYPE XPathResult
  switch (xpr.resultType) {
    case XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE:
    case XPathResult.ORDERED_NODE_SNAPSHOT_TYPE:
      return {
        [Symbol.iterator] () {
          var i = 0;
          return {
            next() {
              var node = xpr.snapshotItem(i++);
              return {value: node, done: !node};
            }
          };
        },
        at(i) {
          return xpr.snapshotItem(i) || undefined;
        }
      };
    case XPathResult.UNORDERED_NODE_ITERATOR_TYPE:
    case XPathResult.ORDERED_NODE_ITERATOR_TYPE:
      return {
        next() {
          var node = xpr.iterateNext();
          return {value: node, done: !node};
        },
        [Symbol.iterator] () {
          return this;
        },
      };
  }
}


// For example, extract the top child elements
let sample_xpr = document.evaluate('/html/*', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);
// Convert into an Array:
let converted_arr = Array.from(convertXPathToIterator(sample_xpr));

// Can be converted to an array!
console.log("length:", converted_arr.length);
console.log("map demo (e => e.tagName):", converted_arr.map(e => e.tagName));

...also, it directly supports for...of without needing to create an entire Array:

function convertXPathToIterator (xpr) {
  // Generate a JavaScript iterator for an *ITERATOR_TYPE XPathResult
  // or a JavaScript iterable for a *SNAPSHOT_TYPE XPathResult
  switch (xpr.resultType) {
    case XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE:
    case XPathResult.ORDERED_NODE_SNAPSHOT_TYPE:
      return {
        [Symbol.iterator] () {
          var i = 0;
          return {
            next() {
              var node = xpr.snapshotItem(i++);
              return {value: node, done: !node};
            }
          };
        },
        at(i) {
          return xpr.snapshotItem(i) || undefined;
        }
      };
    case XPathResult.UNORDERED_NODE_ITERATOR_TYPE:
    case XPathResult.ORDERED_NODE_ITERATOR_TYPE:
      return {
        next() {
          var node = xpr.iterateNext();
          return {value: node, done: !node};
        },
        [Symbol.iterator] () {
          return this;
        },
      };
  }
}

let another_sample_xpr = document.evaluate('/html/*', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);

for( let e of convertXPathToIterator(another_sample_xpr) ) {
  // It's iterable!
  console.log(e.tagName);
}

Hence, this approach is more versatile (and may consume slightly less memory when dealing with extremely large numbers of nodes without initializing an Array).

In my test document, I found a total of 138 td nodes.

Just in case you are primarily interested in counting the number of matches, you can retrieve it directly using the .snapshotLength property for non-iterator types (or manually count for iterator types if preferred):

function convertXPathToIterator (xpr) {
  // Generate a JavaScript iterator for an *ITERATOR_TYPE XPathResult
  // or a JavaScript iterable for a *SNAPSHOT_TYPE XPathResult
  switch (xpr.resultType) {
    case XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE:
    case XPathResult.ORDERED_NODE_SNAPSHOT_TYPE:
      return {
        [Symbol.iterator] () {
          var i = 0;
          return {
            next() {
              var node = xpr.snapshotItem(i++);
              return {value: node, done: !node};
            }
          };
        },
        at(i) {
          return xpr.snapshotItem(i) || undefined;
        }
      };
    case XPathResult.UNORDERED_NODE_ITERATOR_TYPE:
    case XPathResult.ORDERED_NODE_ITERATOR_TYPE:
      return {
        next() {
          var node = xpr.iterateNext();
          return {value: node, done: !node};
        },
        [Symbol.iterator] () {
          return this;
        },
      };
  }
}

let final_sample_xpr = document.evaluate('/html/*', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);

let match_count = final_sample_xpr.snapshotLength;

console.log("number of matches:", match_count);


let final_iterator_xpr = document.evaluate('/html/*', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE);

let manual_match_count = 0;
for( let e of convertXPathToIterator(final_iterator_xpr) )
  manual_match_count ++;

console.log("number of matches:", manual_match_count);

Utilizing Array.from with a XPathResult: A Comprehensive Guide

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to replicate touch functionality on mobile browsers for both Android and iPhone devices?

Step-by-step guide on creating a monochrome version of an image using automation

"Encountering a Heroku error due to an oversized cookie while using Express.js and

Press the submit button after receiving the ajax response

What is the best way to search for and isolate an array object within an array of objects using Javascript?

The website code lacks a dynamically generated <div> element

To access the context menu popup and the first element of a row in a datatable, simply right-click on the row

Is it feasible for a JavaScript function to receive the innerHTML of the element from which it is invoked as an argument?

Tips for passing array objects as parameters to a method during array parsing

Communication between nodes using serial ports in Node.js fails to receive a response from the connected Arduino board

Unable to display material-ui icon when using a conditional ternary statement in React

An error popped up out of the blue while attempting to execute Webpack

Simultaneously activate the top and bottom stacked components by clicking on them

Is there a way to change an ISO 8601 date into the format '/Date(1525687010053)/' using JavaScript?

Having trouble getting my HTML file and CSS styles to render properly in Chrome

Android Chrome users experiencing sidebar disappearance after first toggle

Firebase Firestore is returning the dreaded [object Object] rather than the expected plain object

The Chrome browser does not recognize Sys.WebForms

Utilizing Ajax to update the login form without reloading the page and displaying any errors

Implement a loading bar on the entire page in Vue.js while a request is being made