时间戳

首页 > 解决方案 > 如何解析存储 XML 数据的变量并动态打印数据？

javascript - 如何解析存储 XML 数据的变量并动态打印数据？

问题描述

假设我从一个格式如下的 XML 页面中提取：

<people>
    <person>
        <name>Bob</name>
        <age>45</age>
        <hobby>Programming</hobby>
    </person>
    ....
</people>

如果我有一个将 XML 数据读入 JavaScript 变量的函数，如下所示：

...
var data = responseXML;
...

并且一个 HTML 下拉列表动态填充了数据变量中的名称（选项将通过 JavaScript 使用主体上的 onload 调用添加。在页面加载之前，代码实际上不会包含选项标签，如下所示）：

<select id="names" onchange="getInfo()">
    <option value="Bob">Bob</option>
    <option value="Jim">Jim</option>
    <option value="Ron">Ron</option>
</select>

在 select 上使用 onchange 调用时，如何动态地将有关从下拉列表中选择的人的信息列出到无序列表中？

如果选择 Bob，输出将如下所示：

Name: Bob
Age: 45
Hobby: Golf

如果从下拉列表中选择了一个新人，则将显示他们的信息。鉴于我已有的代码，如果将新人添加到 XML 文档中，他们将自动添加到下拉列表中，因此如果选择他们的信息应该能够自动显示，而无需添加任何其他代码。

我更喜欢使用 JavaScript 而不是 jQuery，因为这是我用来将 XML 文档数据读入 JavaScript 数据变量的方法。

标签： javascripthtmlxml

解决方案

我创建了一个新函数 asPopulate Dropdown并修改了您的getInfo()函数以从 XML 文件中检索数据。希望下面的代码有帮助：

var xml = `<people>
    <person>
        <name>Bob</name>
        <age>45</age>
        <hobby>Programming</hobby>
    </person>
    <person>
        <name>Jim</name>
        <age>40</age>
        <hobby>Study</hobby>
    </person>
    <person>
        <name>Ron</name>
        <age>50</age>
        <hobby>Dancing</hobby>
    </person>
</people>`;

var parser = new DOMParser();
var responseXML = parser.parseFromString(xml,"text/xml");
var data = responseXML;

populateDropdown();

function getInfo(){
  var name = document.getElementById("names").value;
   
  var people = data.getElementsByTagName("people")[0].childNodes;
  for (person in people){
    if(people[person].innerHTML){
      
      var personData = {
        name: people[person].getElementsByTagName("name")[0].innerHTML,
        age: people[person].getElementsByTagName("age")[0].innerHTML,
        hobby: people[person].getElementsByTagName("hobby")[0].innerHTML,
        }
       if (personData.name == name){
        var infoDiv = document.getElementById("info");
        infoDiv.innerHTML = `Name: ${personData.name} <br>Age:${personData.age}<br>Hobby:${personData.hobby}`;
        break;
       }
    }
  }
}

function populateDropdown(){
  var people = data.getElementsByTagName("people")[0].childNodes;
  for (person in people){
    if(people[person].innerHTML){  
        var select = document.getElementById("names");
        var option = document.createElement("option");
        option.value = people[person].getElementsByTagName("name")[0].innerHTML;
        option.innerHTML = people[person].getElementsByTagName("name")[0].innerHTML,
        select.appendChild(option);
    }
  }
}
<select id="names" onchange="getInfo()">
    
</select>

<div id="info">

</div>

推荐阅读