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

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

• javascript
• html

2 Answers 2

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

Steps:

1. Load file from disk.
2. Display file structure
3. Parse the file
4. 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:

1. I used Paolo Moretti's code to grab the local file from the disk.
2. I created a xml document to parse using the DOMParser API
3. I parsed the xml with XPATH
4. 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.

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:

• DOMParser
• XMLHttpRequest