javascript - 尝试用预定义的 xml 文件填写表单(无法更改 xml 文件)

Question

发生的事情是用它在 xml 文件中遇到的第一个“值”填充所有字段。在这种情况下，用日期填充所有字段。

用户使用html按钮插入xml文件

填写表格的功能，我知道循环总是获取它遇到的第一个“值”，但我该如何修复它，而不更改 xml 文件。我试过了，但没有用。

function populateData(form, xmlDoc){ 
"use strict";
var root = xmlDoc.documentElement;

for (var i = 0; i < form.elements.length; i++) {
  var input = form.elements[i];
      if(input.name){ 
      var xmlElement = root.querySelector(input.name);     

    if(xmlElement[i].textContent !== xmlElement[i-1].textContent){
        input.value = xmlElement.textContent;
    }
      }
  }

}

部分XML文件(我想用“值”之间的信息填写表格)

<?xml version="1.0" encoding="UTF-8"?>
<AssetInfo>
<customMetaData>
  <key>Data</key>
  <value>2018-05-23</value>
</customMetaData>
<customMetaData>
  <key>Hora</key>
  <value>11:00</value>
</customMetaData>
<customMetaData>
  <key>Sala</key>
  <value>1</value>
</customMetaData>
<customMetaData>
  <key>Edifício</key>
  <value>casa</value>
</customMetaData>

部分html表单

    <input class="a" type="date" name="value" id="Data" placeholder="Data" />
    <input class="a" type="time" name="value" id="Hora" placeholder="Hora" />
    <input class="a" type="text" name="value" id="Sala" placeholder="Sala" />
    <input class="a" type="text" name="value" id="Edifício" placeholder="Edifício" />
    <input class="a" type="text" name="value" id="Cidade" placeholder="Cidade" />
    <input class="a" type="text" name="value" id="País" placeholder="País" />

Answer 1

将 xml 解析为映射，然后使用该映射查找与输入名称匹配的键的值

// get an xmlDoc to work with for this snippet
var xmlString = `<AssetInfo>
<customMetaData>
  <key>Data</key>
  <value>2018-05-23</value>
</customMetaData>
<customMetaData>
  <key>Hora</key>
  <value>11:00</value>
</customMetaData>
<customMetaData>
  <key>Sala</key>
  <value>1</value>
</customMetaData>
<customMetaData>
  <key>Edifício</key>
  <value>casa</value>
</customMetaData></AssetInfo>`;
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlString, 'text/xml');

function populateData(form, xmlDoc){ 
"use strict";
var root = xmlDoc.documentElement;
// get all the customMetaData nodes
var metadataNodes = root.querySelectorAll('customMetaData');
// create an object to store the key/values
var map = {};
// iterate over the nodes and get the key and value to add to the map
  metadataNodes.forEach(function(metadata) {
    var key = metadata.querySelector('key').textContent;
    var value = metadata.querySelector('value').textContent;
    map[key] = value;
  });
  // interate over your form and find the value in the map for that input's name
  for (var i = 0; i < form.elements.length; i++) {
    var input = form.elements[i];
    if(input.name){ 
        input.value = map[input.name] || '';     
    }
    
  }
}

populateData(document.getElementById('myForm'), xmlDoc);

<form id="myForm">
  <input name="Data" /><br />
    <input name="Hora" /><br />
      <input name="Sala" /><br />
        <input name="Edifício" /><br />
</form>