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

Question

I have tried using some libraries but I can not seem to find any answer. i have a React site and I am uploading a file using a form. I'm looking for a way to parse the XML file, and reach it's children and I can't seem to find the way to do that.

My form:

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

my listener:

my event:

 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);
  }

my xml file:

<?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>

I'm trying to reach one of the fields in the XML. Can anyone help me with the importing the file and reaching the fields?

Thank you.

Answer 1

You can use DOMParser to convert the XML to 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'));

Answer 2

Here is a working example with xml2js :

• You can use the fetch api to pull data from a .XML file like this:

• responseText is the .XML datasource fetched from example.xml

• within the curly braces of .then((responseText) = {}) the xml2json script is added to parse the .xml data to Json format console.log(result) will render the json format in the terminal essentially transforming console.log(responseText) XML to console.log(result) JSON you can use state to structure your data as you would with any json data file.

side note : if you remove the parse string and add console.log(responseText) instead the output will be in XML format in your terminal for comparison.

 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;

Answer 3

You can use childNodes , getElementsByTagName , etc on it the way you could an html document.

You can see an example of parsing XML with javascript here: https://www.w3schools.com/xml/xml_parser.asp

If you tell me what node you are trying to access on that document I can try to help you further.

Answer 4

The easiest method is to use an npm package to convert xml to json and use like an object. You can use this, 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)