How to pull XML data from the "tag" using Filereader and Domparser? (Nfe)

Question

What am I doing wrong?

• My intention is to save some information of an Nfe (take the tag data) from an XML, without having to do upload of the same nowhere.

Head -

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

Body -

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<h1>-------------</h1>
<p id="demo"></p><br>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>

Script -

  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList
    for (var i = 0, f; f = files[i]; i++) {

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Print the contents of the file
          var span = document.createElement('span');                    
          span.appendChild(document.createTextNode(e.target.result));
          var parser = new DOMParser();
          var xmlDoc = parser.parseFromString(span.innerText,"text/xml");
          //document.getElementById('demo').innerHTML = xmlDoc;
          document.getElementById('demo').innerHTML = '1:' + xmlDoc.getElementsByTagName("infNFe");
          document.getElementById('demo2').innerHTML = '2:' + xmlDoc.getElementsByTagName("infNFe")[0];
          document.getElementById('demo3').innerHTML = '3:' + xmlDoc.getElementsByTagName("infNFe")[0].childNodes;
          document.getElementById('demo4').innerHTML = '4:' + xmlDoc.getElementsByTagName("infNFe")[0].childNodes[0];
          document.getElementById('demo5').innerHTML = '5:' +
          xmlDoc.getElementsByTagName("infNFe")[0].childNodes[0].nodeValue;

          //Teste criando Append em um span, para testar se ele mostra todo o conteudo do XML
          //document.getElementById('list').insertBefore(span, null);
        };
      })(f);
      // Read in the file
      reader.readAsText(f);
    }
  }
  document.getElementById('files').addEventListener('change', handleFileSelect, false);

After running I have this result, using an XML of Nfe v4.00

1:[Object Htmlcollection]

2:[Object Element]

3:[Object Nodelist]

4:[Object Element]

5:null

Answer 1

There’s no way I’m going to unlock one xml <tag> for <tag>, then the correct one is to search directly to <tag> that is seeking, and if there is more than one, increase the [ ] of the command, to jump to the next <tag> by the same name.

Soon my goal was to get the version of the invoice and the name of the recipient, and what would fix that in the code would be:

    return function(e) {
      // Print the contents of the file
      var span = document.createElement('span');                    
      span.appendChild(document.createTextNode(e.target.result));
      var parser = new DOMParser();
      var xmlDoc = parser.parseFromString(span.innerText,"text/xml");
      var x = xmlDoc.getElementsByTagName("infNFe")[0].getAttributeNode("versao").value;
      var z = xmlDoc.getElementsByTagName("xNome")[1].childNodes[0].nodeValue;
      document.getElementById('demo').innerHTML =  '1:' + x;
      document.getElementById('demo2').innerHTML = '2:' + z;

    };

• In this way, it is possible to take the content from within a <tag>, directly.

---

If there’s another way to do the same thing, if it manifests itself, maybe it’s more efficient than the one I’m using!