Is it possible to load all nodes on button click using the XMLHttpRequest Object?

Question

Is it possible to load all nodes on button click using the XMLHttpRequest Object?

Why is it that when I insert the parent node, nothing shows up -- but when I use the root node ("dataroot"), only the first child node displays in the table even though there are multiple child/sibling nodes? Here's the HTML code:

<!DOCTYPE html>
<html>
<head>
    <title>
        Pharma-Find
    </title>
    <link rel="stylesheet" type="text/css" href="getDrugs.css">
    <script type = "text/javascript" src="getDrugs.js"></script>
</head>

<body>
    <button type="button" onclick="loadXMLDoc()">Pharma Find</button>
    <br><br>
    <table id="demo"></table>
</body>
</html>

This is the JS script:

function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "drugA.xml", true);
  xmlhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Generic Brand</th><th>Brand Name</th><th>lnk</th><th>purpose</th><th>DEASch</th><th>Category</th><th>Study Topic</th></tr>";
  var x = xmlDoc.getElementsByTagName("dataroot");
  for (i = 0; i <x.length; i++) { 
    table +=
    "<tr><td>" +
    x[i].getElementsByTagName("GenericName")[0].childNodes[0].nodeValue + 
    "</td><td>" +
    x[i].getElementsByTagName("BrandName")[0].childNodes[0].nodeValue +
    "</td><td>"+
    x[i].getElementsByTagName("lnk")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("Purpose")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("DEASch")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("Category")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("StudyTopic")[0].childNodes[0].nodeValue + "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}

javascript ajax xml

Answer 1

Answer №1

To extract data from an XML document, utilize Query Selector and Xpath Expressions. Use the textContent property to retrieve text within an element or node.

I have included a sample Product item element node in the examples for creating a valid XML structure. By simplifying the child elements, you can observe how these methods function with just two elements.

Query selector employs CSS selectors to select and return elements.

const data = getXMLDocument();
const dataNodes = data.querySelectorAll('Product');

// fetch the table body
const tbody = document.querySelector('#OutputTarget tbody');
// remove all current child nodes
let node;
while (node = tbody.firstChild) {
  node.remove();
}

dataNodes.forEach(
  (product) => {
    // create and append a new tr
    const tr = tbody.appendChild(
      document.createElement('tr')
    );
    tr
      .appendChild(document.createElement('td'))
      .textContent = product.querySelector(':scope > GenericName')?.textContent
    tr
      .appendChild(document.createElement('td'))
      .textContent = product.querySelector(':scope > BrandName')?.textContent
  }
);

function getXMLDocument() {
  const xmlString = `<dataroot>
      <Product>
        <GenericName>One</GenericName>
        <BrandName>Awesome</BrandName>   
      </Product>
      <Product>
        <GenericName>Two</GenericName>
        <BrandName>Faboulous</BrandName>   
      </Product>
    </dataroot>`;
  return (new DOMParser()).parseFromString(xmlString, 'application/xml');
}

<table id="OutputTarget">
  <thead>
    <tr><th>Generic Brand</th><th>Brand Name</th></tr>
  </thead>
  <tbody>

  </tbody>
</table>

Xpath expressions offer a more detailed approach, supporting namespaces and enabling specific conditions while returning values directly.

const data = getXMLDocument();
const dataNodes = data.evaluate(
    '//Product', 
    data, 
    null, 
    XPathResult.ANY_TYPE, 
    null
);

// fetch the table body
const tbody = document.querySelector('#OutputTarget tbody');
// remove all current child nodes
let node;
while (node = tbody.firstChild) {
  node.remove();
}

// iterate the returned list
let productNode = dataNodes.iterateNext();
while (productNode) {
  // create and append a new tr
  const tr = tbody.appendChild(
    document.createElement('tr')
  );
  tr
    .appendChild(document.createElement('td'))
    .textContent = data.evaluate(
      'string(GenericName)', productNode, null, XPathResult.STRING_TYPE, null
    ).stringValue;
  tr
    .appendChild(document.createElement('td'))
    .textContent = data.evaluate(
      'string(BrandName)', productNode, null, XPathResult.STRING_TYPE, null
    ).stringValue;
  
  productNode = dataNodes.iterateNext();
}

function getXMLDocument() {
  const xmlString = `<dataroot>
      <Product>
        <GenericName>One</GenericName>
        <BrandName>Awesome</BrandName>   
      </Product>
      <Product>
        <GenericName>Two</GenericName>
        <BrandName>Faboulous</BrandName>   
      </Product>
    </dataroot>`;
  return (new DOMParser()).parseFromString(xmlString, 'application/xml');
}

<table id="OutputTarget">
  <thead>
    <tr><th>Generic Brand</th><th>Brand Name</th></tr>
  </thead>
  <tbody>
  
  </tbody>
</table>

Answer 2

To extract data from an XML document, utilize Query Selector and Xpath Expressions. Use the textContent property to retrieve text within an element or node.

I have included a sample Product item element node in the examples for creating a valid XML structure. By simplifying the child elements, you can observe how these methods function with just two elements.

Query selector employs CSS selectors to select and return elements.

const data = getXMLDocument();
const dataNodes = data.querySelectorAll('Product');

// fetch the table body
const tbody = document.querySelector('#OutputTarget tbody');
// remove all current child nodes
let node;
while (node = tbody.firstChild) {
  node.remove();
}

dataNodes.forEach(
  (product) => {
    // create and append a new tr
    const tr = tbody.appendChild(
      document.createElement('tr')
    );
    tr
      .appendChild(document.createElement('td'))
      .textContent = product.querySelector(':scope > GenericName')?.textContent
    tr
      .appendChild(document.createElement('td'))
      .textContent = product.querySelector(':scope > BrandName')?.textContent
  }
);

function getXMLDocument() {
  const xmlString = `<dataroot>
      <Product>
        <GenericName>One</GenericName>
        <BrandName>Awesome</BrandName>   
      </Product>
      <Product>
        <GenericName>Two</GenericName>
        <BrandName>Faboulous</BrandName>   
      </Product>
    </dataroot>`;
  return (new DOMParser()).parseFromString(xmlString, 'application/xml');
}

<table id="OutputTarget">
  <thead>
    <tr><th>Generic Brand</th><th>Brand Name</th></tr>
  </thead>
  <tbody>

  </tbody>
</table>

Xpath expressions offer a more detailed approach, supporting namespaces and enabling specific conditions while returning values directly.

const data = getXMLDocument();
const dataNodes = data.evaluate(
    '//Product', 
    data, 
    null, 
    XPathResult.ANY_TYPE, 
    null
);

// fetch the table body
const tbody = document.querySelector('#OutputTarget tbody');
// remove all current child nodes
let node;
while (node = tbody.firstChild) {
  node.remove();
}

// iterate the returned list
let productNode = dataNodes.iterateNext();
while (productNode) {
  // create and append a new tr
  const tr = tbody.appendChild(
    document.createElement('tr')
  );
  tr
    .appendChild(document.createElement('td'))
    .textContent = data.evaluate(
      'string(GenericName)', productNode, null, XPathResult.STRING_TYPE, null
    ).stringValue;
  tr
    .appendChild(document.createElement('td'))
    .textContent = data.evaluate(
      'string(BrandName)', productNode, null, XPathResult.STRING_TYPE, null
    ).stringValue;
  
  productNode = dataNodes.iterateNext();
}

function getXMLDocument() {
  const xmlString = `<dataroot>
      <Product>
        <GenericName>One</GenericName>
        <BrandName>Awesome</BrandName>   
      </Product>
      <Product>
        <GenericName>Two</GenericName>
        <BrandName>Faboulous</BrandName>   
      </Product>
    </dataroot>`;
  return (new DOMParser()).parseFromString(xmlString, 'application/xml');
}

<table id="OutputTarget">
  <thead>
    <tr><th>Generic Brand</th><th>Brand Name</th></tr>
  </thead>
  <tbody>
  
  </tbody>
</table>

Is it possible to load all nodes on button click using the XMLHttpRequest Object?

Answer №1

Similar questions

Issue with error handling not being triggered when calling SAPUI5 function()

KafkaJS: tips for setting up a consumer on a website/server located remotely

Placing the jQuery/javascript source pages right before the closing body tag

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

Ways to stop your browser from opening a new window when it is unable to recognize the address

Is there a way to execute a condition in a Vue component before rendering the HTML in the template?

Is there a way to automatically recalculate the "Total Price" when the input values are adjusted?

The side menu in Bootstrap dropdown experiences a one-time functionality

Mystery of the Unresponsive MD Ripple Button

Having trouble with the jQuery load function not functioning properly

"The ng-route feature is not working as expected; instead of displaying the template url, it is showing

When using ng-repeat, it fails to showcase distinct JSON values and instead shows all the content from the JSON file in a single list item

Issue encountered during Firebase deployment: Module '@babel/runtime/helpers/builtin/interopRequireDefault' not found

Passing event handlers to Client Components within NextJS 13 and using the <button onClick={}> element is not supported

Issues with Array.push causing improper pushes

What steps should I take to convert this from a string to HTML format?

The dynamic combination of jCarousel, jQuery Accordion, and fade in effects

"Error: Multer is Unable to Read the Undefined File

Simple organization of a table by sorting one column in a descending direction, all without the need for any additional plugins

Refresh the form fields using ajax technology