如何在react中解析 xml 文件？

IT技术 javascript reactjs
2021-05-23 14:48:18

我曾尝试使用一些库，但似乎找不到任何答案。我有一个 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 中的字段之一。任何人都可以帮助我导入文件并到达字段吗？

谢谢你。

4个回答

您可以使用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'));

这是一个使用 xml2js 的工作示例：

• 您可以使用 fetch api 从 .XML 文件中提取数据，如下所示：

• responseText 是从 example.xml 获取的 .XML 数据源

• 在 .then((responseText) = {}) 的大括号内，添加 xml2json 脚本以将 .xml 数据解析为 Json 格式 console.log(result) 将在终端中呈现 json 格式，本质上是将 console.log( responseText) XML 到 console.log(result) JSON 您可以像处理任何 json 数据文件一样使用 state 来构建数据。

旁注：如果删除解析字符串并添加 console.log(responseText) ，则终端中的输出将采用 XML 格式以进行比较。

 import React, {Component} from 'react';
 import {parseString} from 'xml2js'



    class App extends Component {


     componentDidMount(){
      this._isMounted = true;
      var url = "https://example.xml"
      fetch(url)
        .then((response) => response.text())
        .then((responseText) => {
       parseString(responseText, function (err, result) {
         console.log(result);
         return result;
        });
      this.setState({
        datasource : result
        })
       })
    .catch((error) => {
      console.log('Error fetching the feed: ', error);
    });
  }



      componentWillUnMount() {
         this._isMounted = false;
      }
      
      

      render(){
        return(
          <div>

          </div>

        )
      }
    }

    export default App;

您可以像使用html 文档一样在其上使用childNodes,getElementsByTagName等。

您可以在此处查看使用 javascript 解析 XML 的示例：https : //www.w3schools.com/xml/xml_parser.asp

如果您告诉我您尝试访问该文档的哪个节点，我可以尝试进一步帮助您。

最简单的方法是使用npm包将xml转换成json，像对象一样使用。你可以使用这个，xml2json npm module

var parser = require('xml2json');

var xml = "<foo attr=\"value\">bar</foo>";
console.log("input -> %s", xml)

// xml to json
var json = parser.toJson(xml);
console.log("to json -> %s", json);

// json to xml
var xml = parser.toXml(json);
console.log("back to xml -> %s", xml)
其它你可能感兴趣的问题
上一篇重新加载页面后 Service Worker 显示为已删除 下一篇iOS（react-native）：使用react导航呈现的标题顶部的不必要空间