Заполните форму с выбранным пользователем XML-файлом

Question

Часть html-формы

<div id="form1">

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

У меня есть html-форма, и она способна создавать XML-файл с таким значением ввода, как это.Тег «ключ» - это имя ввода, а тег «значение» - это значение.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<AssetInfo xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'>
<assetSubType>Audio_Video</assetSubType>
<state>importado</state>
<name>transferir (1).jpeg</name>
  <customMetaData>
     <key>Data</key>
     <value>2018-05-21</value>
  </customMetaData>
  <customMetaData>
     <key>Hora</key>
     <value>12:12</value>
  </customMetaData>
  <customMetaData>
     <key>Sala</key>
     <value>sala 2</value>
  </customMetaData>
  <customMetaData>
     <key>Edifício</key>
     <value>casa</value>
  </customMetaData>
  <customMetaData>
     <key>Cidade</key>
     <value>porto</value>
  </customMetaData>
  <customMetaData>
     <key>País</key>
     <value>Portugal</value>
  </customMetaData>
</AssetInfo>

И я хочу заполнить входные данные формы значениями внутри тега «значение».

Я пытался сделать это, пользователь выбирает xml-файл, он ищет в xml-файле «ключ» и значение «tag», сохраняет вставку текста в этих тэгах, затем ищет во всех входах формы"name" = текст в теге "key" и заполните значением из тега "value".

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

  req.onload = function() { 
    URL.revokeObjectURL(fileURL);
   populateData(fileInput.form, xmlDoc);
  };

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

function populateData(form, xmlDoc){ 
    "use strict";
  var root = xmlDoc.documentElement;
  var metadataNodes =root.querySelectorAll("customMetaDados");
    var map={};
    metadataNodes.forEach(function(metadata) {
    var key = metadata.querySelector('key').textContent;
    var value = metadata.querySelector('value').textContent;
    map[key] = value;
  });

    for (var i = 0; i < form.elements.length; i++) {
    var input = form.elements[i];
    if(input.name){ 
        input.value = map[input.name] || '';        
        }
          }
      }    

function readXML(){
    "use strict";
    var xml = new XMLHttpRequest();
    xml.open('GET', 'xml/*', false);
    xml.send();
    var xmlData=xml.responseXML;
    if(!xmlData){
        xmlData=(new DOMParser()).parseFromString(xml.responseText,'text/xml');
        var emp = xml.Data.getElementByTagName("customMetaDados");


        for(var i=0;i<emp.length;i++){
            var value= emp[i].getElementsByTagNAme("value")[i].firstCHild.data;
            input.value=value;
        }
    }
}

Answer 1

Есть как минимум два основных способа сделать это.Конвертируйте XML в JSON в javascritp, что в теории он лучший, но я не уверен, Конвертируйте XML в JSON (и обратно), используя Javascript .Но есть способ, который легко реализовать на мой взгляд, и это ваш подход.Он вставляет XML в DOM и читает его, используя обычные методы javascript.Вот небольшой пример:

var sMyString = "<AssetInfo><customMetaData><key>País</key><value>Bielorusia</value></customMetaData><customMetaData><key>País</key><value>Portugal</value></customMetaData></AssetInfo>";
var oParser = new DOMParser();
var oDOM = oParser.parseFromString(sMyString, "text/xml");

//oDOM it's now like document. so:

len = oDOM.getElementsByTagName("value").length;

customerData = [];
for(let i = 0; i<len ; i++){  
  customerData.push(oDOM.getElementsByTagName("value")[i].innerHTML);
  //do whatever with the value
}

console.log(customerData);