如何在反应中解析xml文件？

Question

我试过使用一些库，但似乎找不到任何答案。我有一个 React 网站，我正在使用表单上传文件。我正在寻找一种方法来解析 XML 文件，并找到它的孩子，但我似乎找不到这样做的方法。

我的表格：

 <form onSubmit={this.handleSubmit}>
    <label>
        Upload file:
        <input type="file" ref={input => {this.App = input}} />
    </label>
    <br />
    <button type="submit">Submit</button>
</form>

我的听众：

我的活动：

  handleSubmit(event) {

    //here the file will be opened
    //submit pressed

    var rawFile = new XMLHttpRequest();
    var allText;
    rawFile.open("GET", this.App.files[0], false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                allText = rawFile.responseText;
                // alert(allText);
            }
        }
    }

    rawFile.send(null);
    alert(allText);
  }

我的 xml 文件：

 <?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet type="text/xsl" href="ACSPIXMT.xsl" ?>

<IMPORT>
<ACSPIX Type="2106" SN="UI00650521" Ver="3.05.01"/>
<DEVICE  Name="Performa" SN="04666273"  ModelNum="591" Dt="2018-04-17" Tm="13:53" BGUnit="mg/dL">
</DEVICE>
<RECENTREC Dt="2014-02-11" Tm="18:47"/>
<BGDATA>
<BG Val="226" Dt="2014-02-11" Tm="18:47" D="1"/>
<BG Val="149" Dt="2014-02-08" Tm="18:23" D="1"/>
<BG Val="101" Dt="2014-02-07" Tm="20:56" D="1"/>
<BG Val="275" Dt="2014-02-07" Tm="18:49" D="1"/>
<BG Val="301" Dt="2014-02-06" Tm="19:13" D="1"/>
<BG Val="112" Dt="2014-02-06" Tm="07:20" D="1"/>
<BG Val="213" Dt="2014-02-05" Tm="19:42" D="1"/>
<BG Val="111" Dt="2014-02-05" Tm="12:02" D="1"/>
<BG Val="212" Dt="2014-02-04" Tm="19:18" D="1"/>
</BGDATA>
<STATISTIC>
<ST_TIMERANGE Weeks="2" Dt="2014-02-11"/>
<ST_EVALRESULTS Val="9"/>
<ST_TSTFREQ1 Val="0.6"/>
<ST_TSTFREQ2 Val="1.5"/>
<ST_MBG Val="189"/>
<ST_SD Val=" 74"/>
<ST_HBGI Val="12.3"/>
<ST_LBGI Val="0.0"/>
</STATISTIC>
<CHECK CRC="4816"/>
</IMPORT>

我正在尝试访问 XML 中的字段之一。任何人都可以帮助我导入文件并到达字段吗？

谢谢你。

原文由 Chief Madog 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 DOMParser 将 XML 转换为 DOM。

 const rawFile = new XMLHttpRequest();

rawFile.onreadystatechange = () => {
  if (rawFile.readyState === 4 && (rawFile.status === 200 || rawFile.status === 0)) {
    const parser = new DOMParser();
    const xml = parser.parseFromString(rawFile.response, 'text/xml');

    // Do your querying here.
    // xml will can now be queried like DOM
    // e.g. xml.querySelector('ST_TIMERANGE').getAttribute('Weeks') // returns 2.
  }
};

rawFile.open('GET', this.App.files[0], false);
rawFile.send();

 const raw = `<?xml version="1.0" encoding="ISO-8859-1" ?>
  <?xml-stylesheet type="text/xsl" href="ACSPIXMT.xsl" ?>

  <IMPORT>
  <ACSPIX Type="2106" SN="UI00650521" Ver="3.05.01"/>
  <DEVICE  Name="Performa" SN="04666273"  ModelNum="591" Dt="2018-04-17" Tm="13:53" BGUnit="mg/dL">
  </DEVICE>
  <RECENTREC Dt="2014-02-11" Tm="18:47"/>
  <BGDATA>
  <BG Val="226" Dt="2014-02-11" Tm="18:47" D="1"/>
  <BG Val="149" Dt="2014-02-08" Tm="18:23" D="1"/>
  <BG Val="101" Dt="2014-02-07" Tm="20:56" D="1"/>
  <BG Val="275" Dt="2014-02-07" Tm="18:49" D="1"/>
  <BG Val="301" Dt="2014-02-06" Tm="19:13" D="1"/>
  <BG Val="112" Dt="2014-02-06" Tm="07:20" D="1"/>
  <BG Val="213" Dt="2014-02-05" Tm="19:42" D="1"/>
  <BG Val="111" Dt="2014-02-05" Tm="12:02" D="1"/>
  <BG Val="212" Dt="2014-02-04" Tm="19:18" D="1"/>
  </BGDATA>
  <STATISTIC>
  <ST_TIMERANGE Weeks="2" Dt="2014-02-11"/>
  <ST_EVALRESULTS Val="9"/>
  <ST_TSTFREQ1 Val="0.6"/>
  <ST_TSTFREQ2 Val="1.5"/>
  <ST_MBG Val="189"/>
  <ST_SD Val=" 74"/>
  <ST_HBGI Val="12.3"/>
  <ST_LBGI Val="0.0"/>
  </STATISTIC>
  <CHECK CRC="4816"/>
  </IMPORT>`;
const parser = new DOMParser();
const xml = parser.parseFromString(raw, 'text/xml');

console.log(xml.querySelector('ST_TIMERANGE').getAttribute('Weeks'));

原文由 dork 发布，翻译遵循 CC BY-SA 4.0 许可协议