dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: How to display XML content using JavaScript?

  1. #1
    Join Date
    Mar 2017
    Posts
    17

    How to display XML content using JavaScript?

    I have the following XML:

    Code:
        <product id="1">
            <name>WQR</name>
            <quantity>150</quantity>
            <price>15.99</price>
        </product>
    
        <product id="2">
            <name>XYZ</name>
            <quantity>270</quantity>
            <price>10.00</price>
        </product>
    
        <product id="3">
            <name>VHJ</name>
            <quantity>300</quantity>
            <price>15.00</price>
        </product>

    I want to be able to display with an "onclick"-function one of the following elements from this XML-file within a div on an html page. For each of these elements there will be a seperate JavaScript function. The aim is to call one of the elements based on it's id-attribute. I tried, but despite my efforts I still can't get this to work :/


    Here is my JavaScript:

    Code:
        function readXML() {
        var Connect = new XMLHttpRequest();
        Connect.open("GET", "products.xml", false);
        Connect.setRequestHeader("Content-Type", "text/xml");
        Connect.send(null);	
    	
        var TheDocument = Connect.responseXML;
    	
        var element1 = xmlData.getElementById('1');
    	
        var name = product.getElementsByTagName("name").innerHTML = textdiv;
        var quantity = product.getElementsByTagName("quantity").innerHTML = textdiv;
        var price = product.getElementsByTagName("price").innerHTML = textdiv;
    
    }

    Note: "textdiv" is just the name of the id-tag of the div on my html page, where I want to get the data displayed on.


    Thank you for your help!
    I greatly appreciate it!

  2. #2
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,888
    First problem is that id values can not start with numbers.
    Fix that first and see if the problem continues.

  3. #3
    Join Date
    Dec 2012
    Posts
    1,495
    Very easy when using jQuery:
    Code:
    <body>
        <div id="name"></div>
        <div id="qty"></div>
        <div id="price"></div>
        <script>
            $.ajax({  
                type: "POST",  
                url: "test.xml",  
                data: "",
                dataType: "xml",
                success: function(xml){
                    var p2 = $(xml).find("product#p2");
                    $("#name").text(p2.find("name").text());
                    $("#qty").text(p2.find("quantity").text());
                    $("#price").text(p2.find("price").text());
                }
            });
        </script>
    I had to change the XML to:
    HTML Code:
    <products>
      <product id="p1">
        <name>WQR</name>
        <quantity>150</quantity>
        <price>15.99</price>
      </product>
    
      <product id="p2">
        <name>XYZ</name>
        <quantity>270</quantity>
        <price>10.00</price>
      </product>
    
      <product id="p3">
        <name>VHJ</name>
        <quantity>300</quantity>
        <price>15.00</price>
      </product>
    </products>
    as my editor (Visual Studio) said "not more than one root element possible".

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,248
    Quote Originally Posted by JMRKER View Post
    First problem is that id values can not start with numbers.
    Fix that first and see if the problem continues.
    I said that a month or so ago and got `jumped on` over stating the same comment, this is true for non HTML5 browsers but HTML5 no allows them...
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,888
    Quote Originally Posted by \\.\ View Post
    I said that a month or so ago and got `jumped on` over stating the same comment, this is true for non HTML5 browsers but HTML5 no allows them...
    Want to run that by me one more time? "but HTML5 no allows them"?
    Also, what is a "non HTML5 browser"? One before IE10, Chrome, Firefox?

    Sorry you got jumped on, but I'm sure it wasn't me. I have enough boot prints already

  6. #6
    Join Date
    Aug 2016
    Posts
    113
    http://www.handgunsforhomeless.com/webnewbie1/


    products.xml ...
    Code:
    <root>
    <product id="1">
            <name>WQR</name>
            <quantity>150</quantity>
            <price>15.99</price>
        </product>
    
        <product id="2">
            <name>XYZ</name>
            <quantity>270</quantity>
            <price>10.00</price>
        </product>
    
        <product id="3">
            <name>VHJ</name>
            <quantity>300</quantity>
            <price>15.00</price>
        </product>
    </root>
    html ...
    Code:
    <button onclick=readXML('1')>1</button>
    <button onclick=readXML('2')>2</button>
    <button onclick=readXML('3')>3</button>
    <div id=nam></div>
    <div id=quantity></div>
    <div id=price></div>
    
    <script>
    function readXML(which) {
        var Connect = new XMLHttpRequest();
        Connect.open("GET", "products.xml", false);
        Connect.setRequestHeader("Content-Type", "text/xml");
        Connect.send(null);	
        var TheDocument = Connect.responseXML;	
        var element1 = TheDocument.getElementById(which);	
        nam.innerHTML = element1.getElementsByTagName("name")[0].childNodes[0].nodeValue;
        quantity.innerHTML = element1.getElementsByTagName("quantity")[0].childNodes[0].nodeValue;
        price.innerHTML = element1.getElementsByTagName("price")[0].childNodes[0].nodeValue;
    }
    
    </script>
    Last edited by shakazorba; 03-21-2017 at 07:55 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles