javascript - 如何在反应中解析xml文件?
问题描述
我尝试过使用一些库,但似乎找不到任何答案。我有一个 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 中的某个字段。谁能帮我导入文件并到达字段?
谢谢你。
解决方案
您可以使用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'));
推荐阅读
- php - 可以向excel导入添加多个参数吗?
- .net - 如何使用 F# 实现归并排序
- rest - 如何在 Micronaut 中实现具有许多可选参数的声明式 HTTP 客户端?
- prolog - 我无法在 prolog 中实现 Knight and Knave 问题
- react-native - React Native 中的默认操作系统样式
- angular-i18n - Angular,i18n,添加翻译 - 工作流程
- swift - 在顶点着色器之前将计算/内核函数应用于顶点缓冲区
- django - 有没有优雅的方式从 3 个选项中获取数据?
- android - 搜索栏使用 RecyclerView 和 Firebase(OnClick)
- javascript - 拉拉维尔 | 将 Vue.js 值传递给刀片中的数据值