How to parse XML for Chrome browser using javascript-CodePudding

How to use JS to parse xml on chrome browser and output to html form field? My script works on MS ie. The XML is shown as printed source file "http_myxml.xml". html output from JS to "document.display"

<?xml version = "1.0" ?>
<record>
<c_date>2022-11-21 07:22:10</cx_date>
<ev1_sup>1.22</ev1_sup>
</record>

var xml_data_URL="http_myxml.xml";
var Polling;
var Ptr411Name="c_date";
var Ptr52901Name="ev1_sup";

var xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = true;
 
function GetData()
{
  if(xml.readyState==4)  // Is the load completed?
  {
    xml.load(xml_data_URL);
    Polling = true; 
  }
  setTimeout("GetData()",16000);
}
 
function DisplayData()
{
  var xmlElements;
  var svgElement;
  // Check for XML file update 
  if(!Polling) return;
       
  if(xml.readyState==4)  // Is the load completed?
  {
    Polling = false;
  
    var err = xml.parseError; 
    if (err.errorCode == 0)
    { 
    
    // update form fields   
xmlElements = xml.getElementsByTagName(Ptr411Name);
document.display.c_date.value=xmlElements.item(0).text;

xmlElements = xml.getElementsByTagName(Ptr52901Name);
document.display.ev1_sup.value=xmlElements.item(0).text;

if(xmlElements.item(0).text == 0)    
      window.status = "x";
    }
    else
    {
      alert("advice: xml data load timed out: " err.reason);
    }
  }
  setTimeout("DisplayData()",8000);
}

<html>
<form action="" name="display" method="post"><input  size="26" readonly name="c_date"><input  size="26" readonly name="ev1_sup"></form>
</html>

This code works for ie, browser displays the xmlelement data c_date and ev1_sup in corresponding html form fields. How to make this work for Chrome?

CodePudding user response：

Example 1

In this example I load the XML document:

<?xml version="1.0" encoding="UTF-8"?>
<fields>
  <field type="text" name="title"/>
  <field type="text" name="description"/>
</fields>

For loading the XML document I use the fetch API. For the example I replace the real URL with a data URL to show that it works here on ST.

var xml_data_URL = 'data:application/xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPGZpZWxkcz4KPGZpZWxkIHR5cGU9InRleHQiIG5hbWU9InRpdGxlIi8 CjxmaWVsZCB0eXBlPSJ0ZXh0IiBuYW1lPSJkZXNjcmlwdGlvbiIvPgo8L2ZpZWxkcz4=';

document.addEventListener('DOMContentLoaded', e => {
  fetch(xml_data_URL).then(res => res.text()).then(text => {
    let parser = new DOMParser();
    let xmlDoc = parser.parseFromString(text, "application/xml");
    [...xmlDoc.documentElement.children].forEach(node => {
      let type = node.getAttribute('typw');
      let name = node.getAttribute('name');
      document.forms.form01.innerHTML  = `<label>${name}: <input type="${type}"
        name="${name}"></label>`;
    });
  });
});

<form name="form01"></form>

Example 2

Based on the XML document:

<?xml version="1.0" encoding="UTF-8"?>
<record>
<c_date>2022-11-21 07:22:10</c_date>
<ev1_sup>1.22</ev1_sup>
</record>

The next example is looping the child elements of the XML document. For each element it selects the form element with the same name and inserts the textContent.

var xml_data_URL = 'data:application/xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHJlY29yZD4KPGNfZGF0ZT4yMDIyLTExLTIxIDA3OjIyOjEwPC9jX2RhdGU CjxldjFfc3VwPjEuMjI8L2V2MV9zdXA CjwvcmVjb3JkPg==';

document.addEventListener('DOMContentLoaded', e => {
  fetch(xml_data_URL).then(res => res.text()).then(text => {
    let parser = new DOMParser();
    let xmlDoc = parser.parseFromString(text, "application/xml");
    
    [...xmlDoc.documentElement.children].forEach(node => {
      document.forms.display[node.nodeName].value = node.textContent;
    });
  });
});

<form action="" name="display" method="post">
  <input type="text"  size="26" readonly name="c_date">
  <input type="text"  size="26" readonly name="ev1_sup">
</form>