Javascript:从具有相同标签名称的两个 XML 节点检索数据的可靠方法是什么？

标签 javascript xml xmlnode

功能齐全的示例。

问题:一些<UNIT>节点有几个<NAMES>子节点，而其他节点则没有。如何从具有相同名称标签 <NAMES> 的兄弟节点检索数据如果我不知道它们在节点树中的位置？有没有简单的方法来获取它们的相对位置？

例如，如何检索 <NAMES> 中包含的“加利福尼亚”属性标签(我只成功检索了前 2 个属性):
California Republic The Golden State California CA The Eureka State Golden West

注意:XML 节点的格式不一致，并且不允许我更改 XML。 

/*retrieve specific XML nodes*/
function testResults() {
const { value } = myInputId;
const foundState = [...xmlDoc.querySelectorAll('STATE')]
.find(possibleMatch => possibleMatch.textContent === value);
const unit = foundState.parentElement;
var u_state = unit.querySelector('STATE') ? unit.querySelector('STATE').textContent: "Not Found";
var u_gdp = unit.querySelector('GDP') ? unit.querySelector('GDP').textContent: "Not Found";
var u_pop = unit.querySelector('POPULATION') ? unit.querySelector('POPULATION').textContent: "Not Found";
var u_code = unit.querySelector('CODE') ? unit.querySelector('CODE').textContent: "Not Found";

/*retrieve alternate names attributes from 1st "NAMES" node*/
var u_name1 = unit.querySelector('NAMES') ? unit.querySelector('NAMES').getAttribute('name'): "Not Found";
var u_other1 = unit.querySelector('NAMES') ? unit.querySelector('NAMES').getAttribute('other'): "Not Found";

/*retrieve alternate names attributes from 2nd "NAMES" node*/
var u_name2 = unit.querySelector('NAMES') ? unit.querySelector('NAMES').getAttribute('name'): "Not Found";
var u_other2 = unit.querySelector('NAMES') ? unit.querySelector('NAMES').getAttribute('other'): "Not Found";

/*retrieve alternate names attributes from 3rd "NAMES" node*/
var u_name3 = unit.querySelector('NAMES') ? unit.querySelector('NAMES').getAttribute('name'): "Not Found";
var u_other3 = unit.querySelector('NAMES') ? unit.querySelector('NAMES').getAttribute('other'): "Not Found";

/*show retrieved XML data*/
document.getElementById("u_state").innerHTML = u_state ;
document.getElementById("u_gdp").innerHTML = u_gdp ;
document.getElementById("u_pop").innerHTML = u_pop;
document.getElementById("u_code").innerHTML = u_code;
document.getElementById("u_name1").innerHTML = u_name1;
document.getElementById("u_other1").innerHTML = u_other1;
document.getElementById("u_name2").innerHTML = u_name2;
document.getElementById("u_other2").innerHTML = u_other2;
document.getElementById("u_name3").innerHTML = u_name3;
document.getElementById("u_other3").innerHTML = u_other3;
}

/*simulate xmlDoc*/
var parser, xmlDoc, x, i;
var text = `<STATE_DATA>
  <UNIT>
    <STATE>California</STATE>
    <GDP>2,500,000,000,000</GDP>
    <POPULATION>39,600,000</POPULATION>
    <NAMES name='California Republic' other='The Golden State' />
    <NAMES name='California' other='CA' />
    <NAMES name='The Eureka State' other='Golden West' />
    <CODE>CA</CODE>
  </UNIT>
  <UNIT>
    <STATE>Texas</STATE>
    <GDP>1,600,000,000,000</GDP>
    <POPULATION>28,300,000</POPULATION>
    <NAMES name='Republic of Texas' other='The Lone Star State' />
    <NAMES name='Texas' other='TX' />
    <CODE>TX</CODE>
  </UNIT>
</STATE_DATA>
`;
parser = new DOMParser();
xmlDoc = parser.parseFromString(text, "text/xml");

/*submit input on ENTER*/
var n = document.getElementById("myInputId");
n.addEventListener("keyup", function(event) {
  event.preventDefault();
  if (event.keyCode === 13) {
    document.getElementById("myButton").click();
  }
});
<input list="myInput" id="myInputId" value="">
<button id="myButton" onClick="testResults()">submit</button>

<datalist id="myInput">
<option id="CA">California</option>
<option id="TX">Texas</option>
</datalist>

<!--display XML data here-->
<p>state: <span id="u_state"></span></p>
<p>gdp: <span id="u_gdp"></span></p>
<p>pop: <span id="u_pop"></span></p>
<p>code: <span id="u_code"></span></p>
<p>name1: <span id="u_name1"></span></p>
<p>other1: <span id="u_other1"></span></p>
<p>name2: <span id="u_name2"></span></p>
<p>other2: <span id="u_other2"></span></p>
<p>name3: <span id="u_name3"></span></p>
<p>other3: <span id="u_other3"></span></p>

正如您在代码片段中看到的，这是 XML:

<STATE_DATA>
  <UNIT>
    <STATE>California</STATE>
    <GDP>2,500,000,000,000</GDP>
    <POPULATION>39,600,000</POPULATION>
    <NAMES name='California Republic' other='The Golden State' />
    <NAMES name='California' other='CA' />
    <NAMES name='The Eureka State' other='Golden West' />
    <CODE>CA</CODE>
  </UNIT>
  <UNIT>
    <STATE>Texas</STATE>
    <GDP>1,600,000,000,000</GDP>
    <POPULATION>28,300,000</POPULATION>
    <NAMES name='Republic of Texas' other='The Lone Star State' />
    <NAMES name='Texas' other='TX' />
    <CODE>TX</CODE>
  </UNIT>
</STATE_DATA>

最佳答案

只需迭代所有属于所找到的 UNIT 子级的 NAMES 即可。不要为此使用 querySelector，因为 querySelector 只会返回第一个匹配项，而不是下一个匹配项；请改用 querySelectorAll。

const [name1, name2, name3] = unit.querySelectorAll('NAMES');
var u_name1 = name1 ? name1.getAttribute('name') : 'Not Found';
var u_other1 = name1 ? name1.getAttribute('other') : 'Not Found';
var u_name2 = name2 ? name2.getAttribute('name') : 'Not Found';
var u_other2 = name2 ? name2.getAttribute('other') : 'Not Found';
var u_name3 = name3 ? name3.getAttribute('name') : 'Not Found';
var u_other3 = name3 ? name3.getAttribute('other') : 'Not Found';


/*retrieve specific XML nodes*/
function testResults() {
  const {
    value
  } = myInputId;
  const foundState = [...xmlDoc.querySelectorAll('STATE')]
    .find(possibleMatch => possibleMatch.textContent === value);
  const unit = foundState.parentElement;
  var u_state = unit.querySelector('STATE') ? unit.querySelector('STATE').textContent : "Not Found";
  var u_gdp = unit.querySelector('GDP') ? unit.querySelector('GDP').textContent : "Not Found";
  var u_pop = unit.querySelector('POPULATION') ? unit.querySelector('POPULATION').textContent : "Not Found";
  var u_code = unit.querySelector('CODE') ? unit.querySelector('CODE').textContent : "Not Found";

  const [name1, name2, name3] = unit.querySelectorAll('NAMES');
  var u_name1 = name1 ? name1.getAttribute('name') : 'Not Found';
  var u_other1 = name1 ? name1.getAttribute('other') : 'Not Found';
  var u_name2 = name2 ? name2.getAttribute('name') : 'Not Found';
  var u_other2 = name2 ? name2.getAttribute('other') : 'Not Found';
  var u_name3 = name3 ? name3.getAttribute('name') : 'Not Found';
  var u_other3 = name3 ? name3.getAttribute('other') : 'Not Found';

  /*show retrieved XML data*/
  document.getElementById("u_state").innerHTML = u_state;
  document.getElementById("u_gdp").innerHTML = u_gdp;
  document.getElementById("u_pop").innerHTML = u_pop;
  document.getElementById("u_code").innerHTML = u_code;
  document.getElementById("u_name1").innerHTML = u_name1;
  document.getElementById("u_other1").innerHTML = u_other1;
  document.getElementById("u_name2").innerHTML = u_name2;
  document.getElementById("u_other2").innerHTML = u_other2;
  document.getElementById("u_name3").innerHTML = u_name3;
  document.getElementById("u_other3").innerHTML = u_other3;
}

/*simulate xmlDoc*/
var parser, xmlDoc, x, i;
var text =
  "<STATE_DATA>" +
  "<UNIT>" +
  "<STATE>California</STATE>" +
  "<GDP>2,500,000,000,000</GDP>" +
  "<POPULATION>39,600,000</POPULATION>" +
  /*THREE siblings with the same element tag name "NAMES"*/
  "<NAMES name='California Republic' other='The Golden State' />" +
  "<NAMES name='California' other='CA'/>" +
  "<NAMES name='The Eureka State' other='Golden West'/>" +
  "<CODE>CA</CODE>" +
  "</UNIT>" +
  "<UNIT>" +
  "<STATE>Texas</STATE>" +
  "<GDP>1,600,000,000,000</GDP>" +
  "<POPULATION>28,300,000</POPULATION>" +
  /*TWO siblings with the same element tag name "NAMES"*/
  "<NAMES name='Republic of Texas' other='The Lone Star State' />" +
  "<NAMES name='Texas' other='TX'/>" +
  "<CODE>TX</CODE>" +
  "</UNIT>" +
  "</STATE_DATA>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text, "text/xml");

/*submit input on ENTER*/
var n = document.getElementById("myInputId");
n.addEventListener("keyup", function(event) {
  event.preventDefault();
  if (event.keyCode === 13) {
    document.getElementById("myButton").click();
  }
});
<input list="myInput" id="myInputId" value="">
<button id="myButton" onClick="testResults()">submit</button>

<datalist id="myInput">
<option id="CA">California</option>
<option id="TX">Texas</option>
</datalist>

<!--display XML data here-->
<p>state: <span id="u_state"></span></p>
<p>gdp: <span id="u_gdp"></span></p>
<p>pop: <span id="u_pop"></span></p>
<p>code: <span id="u_code"></span></p>
<p>name1: <span id="u_name1"></span></p>
<p>other1: <span id="u_other1"></span></p>
<p>name2: <span id="u_name2"></span></p>
<p>other2: <span id="u_other2"></span></p>
<p>name3: <span id="u_name3"></span></p>
<p>other3: <span id="u_other3"></span></p>

但如果允许的话，使用数组而不是具有硬编码索引名称的变量可能会更好。

关于Javascript:从具有相同标签名称的两个 XML 节点检索数据的可靠方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51690908/

上一篇：javascript - 遍历 $ ("body")除了使用 jquery 的某些标签

下一篇：javascript - 使用FabricJS+React+Jquery无法点击添加文本

相关文章：

javascript - 如何离线运行 "Progressive Web Apps"？

javascript - 我的 "JSON"不工作

delphi - 字符串到 xmlNode delphi(或如何将 xml 片段添加到 TXMLDocument)

XmlNode InnerXml 与 OuterXml

javascript - 如何使用 javascript/jquery 将大的 html block append 到 Blade 文件？

javascript - 如何为日期选择器创建日期范围天间隔？

android - 更改卡片 View 的阴影颜色

java - 使用属性而不是包装集合反序列化 XML 响应

php - 检查每天使用 PHP 更新的大型 XML 文件(100k+ 条目)中的更改的最快、最有效的方法

php - 有人遇到过强制 PHP SimpleXMLElement 节点名称为大写的方法吗？

©2024 IT工具网  联系我们