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 FILE的一部分（我希望用“值”之间的信息填充表单）

<?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解析为映射，然后使用该映射查找与输入名称匹配的键的值

＆＃13;

breakingFunction(BSON.serialize(offendingParameter), ... other params...);

＆＃13;

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

＆＃13;

Answer 2

function loadData(fileInput) {
  "use strict";
  var file = fileInput.files[0];
  var fileURL = URL.createObjectURL(file);
  var req = new XMLHttpRequest();
  req.open('GET', fileURL);
req.onload = function() {
  URL.revokeObjectURL(fileURL);
  var parser = new DOMParser();
  var xmlDoc = parser.parseFromObject(fileURL, 'text/xml');
  populateData(fileInput.form, xmlDoc);
};

req.onerror = function() {
 URL.revokeObjectURL(fileURL);
 console.log('Error loading XML file.');
};

 req.send();
}

HTML按钮

<label><input class="button" style="display: none;" type="file"</label> 
onchange="loadData(this);">Ler XML

尝试使用预定义的xml文件填充表单（无法更改xml文件）

2 个答案: