Load local xml file and show in html5 page

Question

i need to load a local xml file(ie: c:\temp\sample.xml) into local html5 page and show the result variables.

this is sample.xml

<?xml version="1.0" encoding="UTF-8"?>
<fe:Invoice>
    <cbc:ProfileID>1.0</cbc:ProfileID>
    <cbc:ID>FV341375</cbc:ID>
    <fe:AccountingCustomerParty>
        <cbc:AdditionalAccountID>2</cbc:AdditionalAccountID>
        <fe:Party>
            <fe:Person>
                <cbc:FirstName>Andres</cbc:FirstName>
            </fe:Person>
        </fe:Party>
    </fe:AccountingCustomerParty>
    <fe:InvoiceLine>
        <cbc:ID>1102347224825331</cbc:ID>
        <cbc:InvoicedQuantity>1</cbc:InvoicedQuantity>
        <fe:Item>
            <cbc:Description>Item Description</cbc:Description>
        </fe:Item>
        <fe:Price>
            <cbc:PriceAmount currencyID="COP">65000.00</cbc:PriceAmount>
        </fe:Price>
    </fe:InvoiceLine>
</fe:Invoice>

i need to print the values for:

fe:invoice-> cbc:ID
fe:invoice-> fe:AccountingCustomerParty -> fe:Party -> fe:Person -> cbc:FirstName
fe:invoice-> fe:InvoiceLine -> fe:Item -> cbc:Description
fe:invoice-> fe:InvoiceLine -> fe:price -> cbc:PriceAmount

the result on my html5 page must be something like this:

Invioce Id: FV341375

First name: Andres

Description: Item Description

Price: 65000.00

How i can do this using javascript?

thanks

score 3 · Accepted Answer · answered Dec 18 '18 at 05:15

Although this question DOESN'T follow the guidelines to submit one and is too specific I will still answer it.

Steps:

Load file from disk.
Display file structure
Parse the file
Display results

Implementation:

HTML:

function readSingleFile(e) {
  var file = e.target.files[0];
  if (!file) {
    return;
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    var contents = e.target.result;
    displayContents(contents);
  };
  reader.readAsText(file);
}

function displayContents(contents) {
  var element = document.getElementById('file-content');
  element.textContent = contents;
  parse(contents);
}

document.getElementById('file-input')
  .addEventListener('change', readSingleFile, false);
  
var xmlDoc;
function parse(content)
{
  //Create a parser
  var parser = new DOMParser();
  xmlDoc = parser.parseFromString(content,"text/xml");
  //Parse!
  document.getElementById("ID").innerText = "ID: " + xmlDoc.evaluate("//ID",xmlDoc).iterateNext().textContent;
  document.getElementById("FirstName").innerText = "First Name: " + xmlDoc.evaluate("//FirstName",xmlDoc).iterateNext().textContent;
  document.getElementById("Description").innerText = "Description: " + xmlDoc.evaluate("//Description",xmlDoc).iterateNext().textContent;
  document.getElementById("PriceAmount").innerText = "Price: " + xmlDoc.evaluate("//PriceAmount",xmlDoc).iterateNext().textContent;
}

<input type="file" id="file-input" />
<h3>Contents of the file:</h3>
<pre id="file-content"></pre>
<div id="ID">ID: </div>
<div id="FirstName">First Name: </div>
<div id="Description">Description: </div>
<div id="PriceAmount">Price: </div>

How I implemented them:

I used Paolo Moretti's code to grab the local file from the disk.
I created a xml document to parse using the DOMParser API
I parsed the xml with XPATH
I updated the values in the page

CREDITS: How to open a local disk file with Javascript?

PS: Please ask more precise questions and remember to not ask someone to code your project.

thank you so much for your help, i really don't know how to do it — ALEXANDER LOZANO, Dec 18 '18 at 07:08

score 1 · Answer 2 · answered Dec 18 '18 at 05:05

You can do an XMLHttpRequest, which is also known as AJAX. This question talks about it a little more and encourages using an AJAX framework to cover "interoperability issue".

Here's what it would look like.

var client = new XMLHttpRequest();
client.open('GET', 'c:\temp\sample.xml');
client.onreadystatechange = function() {
   var response = client.responseText,
       parser = new DOMParser(),
       xmlDoc = parser.parseFromString(response,"text/xml");

   //use the xml Doc however you want.
}
client.send();

More info:

Load local xml file and show in html5 page

2 Answers2