Fill form with xml file selected by user

Question

Part of the html form

<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>

I have a html form, and its capable of creating a XML file with the inputs value like this. The "key" tag is the name of the input, and the "value" tag is the value.

<?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>

And I want to fill the form inputs with the values inside the "value" tag.

I tried to do this, the user select the xml file, it searchs the xml file for the "key" and value "tag" store the text insert in those tags, then search in all the inputs of the form the "name" = text in the "key" tag and fill with the value from the "value" tag.

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;
        }
    }
}

Emeeus · Accepted Answer · 2018-05-21T15:25:24.333

There are at least two main ways to accomplish this. Convert XML to JSON in javascritp that it is in theory the best, but i'm not sure Convert XML to JSON (and back) using Javascript. But There is a way that it's easy to implement in my opinion, and is your approach. It's inserting XML in DOM and reading it using common javascript methods. Here a little example:

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

How do I convert a XML file to a String, because the XML i showed is an XML the user inserts with an html input button? — Luis Luis Maia Maia, May 21 '18 at 16:17
@LuisLuisMaiaMaia Ajax return string https://stackoverflow.com/questions/14446447/how-to-read-a-local-text-file — Emeeus, May 21 '18 at 16:23

Fill form with xml file selected by user

1 Answers1