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

Question

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

Navigation

#1 by (1 votes)

0

I'm trying to load an XML upload by saving on an object and showing it on the screen. I was able to do showing in a Div

But I'm not able to show in Inputs.

Follow the process and the code:

I choose the File and click Upload

Theresultisthis:

IwouldlikeinsteadtoshowthiswaytoshowInputsinthisway:

BelowtheHTML

<inputtype="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.");
            }
        });
    });

javascript jquery ajax regex xml

asked by anonymous 25.01.2018 / 21:59

1 answer

Remove the link ID when it is referenced with an href Problem to convert SCSS par LESS

score 1 · Accepted Answer

In the $(this).children().each loop, place a selector of input text by grabbing the index of 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
    });
});