How to load data from an XML file into an HTML input field?

Question

I’m trying to upload an XML by uploading it to an object and showing it on the screen. I managed to do it in a Div

But I’m not getting to show in Inputs.

Follow the process and the code:

I choose the File and click Upload

The result is this:

I wish that instead of showing in this way show inside inputs in this way:

Below the Code HTML

 <input type="file" id="fileUpload" />
    <input type="button" id="upload" value="Upload" />
    <hr />
    <form>
            CNPJ:
  <input type="text" name="firstname"><br><br>
  Nome:
  <input type="text" name="lastname"><br><br>
  Emit:
  <input type="text" name="lastname"><br><br>
  IE:
  <input type="text" name="lastname"><br><br>
  CRT:
  <input type="text" name="lastname"><br><br>

    <div id="dvTable">
    </div>

JS Code

      $(function () {
        $("#upload").bind("click", function () {
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xml)$/;
            if (regex.test($("#fileUpload").val().toLowerCase())) {
                if (typeof (FileReader) != "undefined") {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var xmlDoc = $.parseXML(e.target.result);
                        var nfe = $(xmlDoc).find("emit");

                        //Create a HTML Table element.
                        var table = $("<table />");
                        table[0].border = "1";

                        //Add the header row.
                        var row = $(table[0].insertRow(-1));
                        nfe.eq(0).children().each(function () {
                            var headerCell = $("<th />");
                            headerCell.html(this.nodeName);
                            row.append(headerCell);
                        });

                        //Add the data rows.
                        $(nfe).each(function () {
                            row = $(table[0].insertRow(-1));
                            $(this).children().each(function () {
                                var cell = $("<td />");
                                cell.html($(this).text());
                                row.append(cell);
                            });
                        });

                        var dvTable = $("#dvTable");
                        dvTable.html("");
                        dvTable.append(table);
                    }
                    reader.readAsText($("#fileUpload")[0].files[0]);
                } else {
                    alert("Este browser não suporta HTML5.");
                }
            } else {
                alert("Por favor faça Upload de um arquivo XML valido.");
            }
        });
    });

Answer 1

In the loop $(this).children().each put a selector of input text taking the index of the XML elements and adding the values sequentially to the fields:

//Add the data rows.
$(nfe).each(function () {
    row = $(table[0].insertRow(-1));
    $(this).children().each(function (e) { // <-- adicione 'e' como parâmetro para pegar os índices do laço
        var cell = $("<td />");
        cell.html($(this).text());
        row.append(cell);
       $($("input:text")[e]).val($(this).text()); // <-- insere valores nos campos
    });
});