Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Chandan Kalita
Chandan Kalita
13,544 Points

How to pull data from am XML file and show it on html table?

1.First one test.xml, a xml file to store data.

<?xml version="1.0"?> <item> <entry> <Date>1/01/2001</Date> <ProductName>milk</ProductName> <Quantity>10</Quantitty> <GrossPrice>50</GrossPrice> <Profit>10</Profit> </entry> <entry> <Date>2/10/2007</Date> <ProductName>milk</ProductName> <Quantity>20</Quantitty> <GrossPrice>100</GrossPrice> <Profit>20</Profit> </entry> </item>

2.Second one is demo.html, to show the data stored in html. which has an input tag as Text and a submit button. OnClick on the submit button, it should search for the input given and show the output.

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> Product Name: <input type="text" name="ProductName" id="input"> <br /> <input type="submit" value="Submit" onClick="searchXML()"> <br /> <br /> <div id="results"> </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
    function loadXMLDoc(dname)
    {
        if (window.XMLHttpRequest)
        {
            xhttp=new XMLHttpRequest();
        }
        else
        {
            xhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhttp.open("GET",dname,false);
        xhttp.send();
        return xhttp.responseXML;
    } 
    function searchXML()
    {
        xmlDoc=loadXMLDoc("test.xml");
        x=xmlDoc.getElementsByTagName("ProductName");
        input = document.getElementById("input").value;
        size = input.length;
        if (input == null || input == "")
        {
            document.getElementById("results").innerHTML= "Please enter a Product Name!";
            return false;
        }
        for (i=0;i<x.length;i++)
        {
            startString = ProductName.substring(0,size);
            if (startString.toLowerCase() == input.toLowerCase())
            {
                date=xmlDoc.getElementsByTagName("Date")[i].childNodes[0].nodeValue;
                product=xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue;
                quantity=xmlDoc.getElementsByTagName("Quantity")[i].childNodes[0].nodeValue;
                grossprice=xmlDoc.getElementsByTagName("GrossPrice")[i].childNodes[0].nodeValue;
                profit=xmlDoc.getElementsByTagName("Profit")[i].childNodes[0].nodeValue;
                divText = "<h1>The contact details are:</h1><br /><table border=1><tr><th>Date</th><th>Product</th><th>Quantity</th><th>Gross Price</th><th>Profit</th></tr>" + "<tr><td>" + date + "</td><td>" + product + "</td><td>" + quantity + "</td><td>" + grossprice + "</td><td>" + profit + "</td></tr>" + "</table>";
                break;
            }
            else
            {
                divText = "<h2>The product does not exist.</h2>";
            }
        }
        document.getElementById("results").innerHTML= divText;
    }
</script>

</body> </html>

What is wrong in my code? Why Data is not showing?

1 Answer

mikes02
mikes02
Courses Plus Student 16,968 Points

One thing is, your tags are mismatched:

<Quantity>10</Quantitty>

Notice the difference between the opening Quantity and closing where it's spelled Quantitty?

Give this a try:

Product Name: <input type="text" name="ProductName" id="input">
<br />
<input type="submit" value="Submit" onClick="searchXML()">
<br />
<br />
<div id="results"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
    function loadXMLDoc(dname)
    {
        if (window.XMLHttpRequest)
        {
            xhttp=new XMLHttpRequest();
        }
        else
        {
            xhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhttp.open("GET",dname,false);
        xhttp.send();
        return xhttp.responseXML;
    } 
    function searchXML()
    {
        var xmlDoc = loadXMLDoc("test.xml");
        var x = xmlDoc.getElementsByTagName("ProductName");
        var input = document.getElementById("input").value;
        var size = input.length;
        if(input == null || input == "")
        {
            document.getElementById("results").innerHTML= "Please enter a Product Name!";
            return false;
        } else
        {
            for (i = 0; i < x.length; i++)
            {

                if (x.length > 0)
                {
                    var date = xmlDoc.getElementsByTagName("Date")[i].childNodes[0].nodeValue;
                    var product = xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue;
                    var quantity = xmlDoc.getElementsByTagName("Quantity")[i].childNodes[0].nodeValue;
                    var grossprice = xmlDoc.getElementsByTagName("GrossPrice")[i].childNodes[0].nodeValue;
                    var profit = xmlDoc.getElementsByTagName("Profit")[i].childNodes[0].nodeValue;
                    var divText = "<h1>The contact details are:</h1><br /><table border=1><tr><th>Date</th><th>Product</th><th>Quantity</th><th>Gross Price</th><th>Profit</th></tr>" + "<tr><td>" + date + "</td><td>" + product + "</td><td>" + quantity + "</td><td>" + grossprice + "</td><td>" + profit + "</td></tr>" + "</table>";
                    break;
                }
                else
                {
                    var divText = "<h2>The product does not exist.</h2>";
                }               
            }

            document.getElementById("results").innerHTML = divText;
        }        
    }
</script>
Chandan Kalita
Chandan Kalita
13,544 Points

thank you for your answer.. I figure it out.. Now trying to add data to the xml file using a html form... Can you suggest what I am doing wrong?

function addElement(){

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.open("GET","xml/test.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

var rootElement = xmlDoc.documentElement;

var productname = document.getElementById('ProductName@').value;
var date = document.getElementById('Date@').value;
var quantity = document.getElementById('Quantity@').value;
var grossprice = document.getElementById('GrossPrice@').value;
var profit = document.getElementById('Profit@').value;

/* create entry element*/
var newEntry = document.createElement('entry');

/* create child elements and text values and append one by one */
var newProduct = xmlDoc.createElement('ProductName');
var newProductText = xmlDoc.createTextNode(productname);
newProduct.appendChild(newProductText);
newEntry.appendChild(newProductName);

var newDate = xmlDoc.createElement('Date');
var newDateText = xmlDoc.createTextNode(date);
newDate.appendChild(newDateText);
newEntry.appendChild(newDate);

var newQuantity = xmlDoc.createElement('Quantity');
var newQuantityText = xmlDoc.createTextNode(quantity);
newQuantity.appendChild(newQuantityText);
newEntry.appendChild(newQuantity);

var newGrossPrice = xmlDoc.createElement('GrossPrice');
var newGrossText = xmlDoc.createTextNode(grossprice);
newGrossPrice.appendChild(newGrossText);
newEntry.appendChild(newGrossPrice);

var newProfit = xmlDoc.createElement('Profit');
var newProfitText = xmlDoc.createTextNode(profit);
newProfit.appendChild(newProfitText);
newEntry.appendChild(newProfit);


/* append completed record to the document */
rootElement.appendChild(newEntry);
xmlDoc.save("xml/test.xml");

}