Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts

    Calling a subset of an XML doc

    I'm using an XMLHttpRequest to call an XML document.

    Code:
    xmlhttp.open("GET","gallery.xml",false);
    xmlhttp.send();
    var xmlDoc = xmlhttp.responseXML; 
    var x = xmlDoc.getElementsByTagName("photo");
    How do I retrieve a subset of the photo elements - for example, retrieve only those with "insect" in the category node?
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,620
    Thanks
    78
    Thanked 4,388 Times in 4,353 Posts
    Show some sample XML. May be trivial, may be harder. Depends on the XML contents.

    If possible, show at least two of the nodes, one with and one without the data you are after.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,302
    Thanks
    13
    Thanked 345 Times in 341 Posts
    as a rough estimate, querySelectorAll() should work.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #4
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    Code:
    <photos>
         <photo big="images/lilypads.jpg" thumb="images/lilypads_t.jpg">
              <name>Lily Pads</name>
              <description>Saigon: I'd lie to spend more time there.</description>
              <category>travel, flora</category>
         </photo>
    
         <photo big="images/buddha.jpg" thumb="images/buddha_t.jpg">
              <name>Sleeping Buddha</name>
              <description>Nha Tran: I liked it because it had big feet</description>
              <category>travel, buddha</category>
         </photo>
    </photos>
    Last edited by marilynn.fowler; 05-23-2012 at 02:28 AM. Reason: typos
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #5
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,302
    Thanks
    13
    Thanked 345 Times in 341 Posts
    that is going to be problematic. first I’d say you have un-normalised data in the <category> element, so you would actually need a script to find your matches. I would recommend to use a <category> tag for each category so you can match more easily. but without the use of XPath I see no simple way to achieve that without an explicit text search.

    and that XML is not well-formed ...
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #6
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    That's what I get for typing a on my iPad instead of cutting and pasting. Can JavaScript understand xpath expressions?
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #7
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,302
    Thanks
    13
    Thanked 345 Times in 341 Posts
    JavaScript - yes, browsers - depends on the browser
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    if I understand correctly what you are trying to do, maybe the below will help - of course you will have to reconstruct whatever you want to be shown from the nodes in the xml, but this example shows the text from the name node if the term in the search box matches part or all of the category.

    You have one major problem with your xml - you are self-closing your photo tags:
    Code:
    <photo big="images/lilypads.jpg" thumb="images/lilypads_t.jpg" />
    you shouldn't do that as you have a closing tag after the other sub-nodes.

    Code:
    <body>
    <input type="text" id="inp"/><input type="button" value="search" onclick="searchPics()"/> 
    <div id="results"></div>
    <script type="text/javascript">
    var xml;
    
    function downloadUrl(callback) {
    url="gallery.xml"
    var xmlFile = window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject('Microsoft.XMLHTTP');
    	xmlFile.onreadystatechange = function() {
       if (xmlFile.readyState == 4) {
         callback(xmlFile, xmlFile.status);
       }
     };
    xmlFile.open("GET", url, true); 
    xmlFile.send(null);
    }
    
    
    downloadUrl(function(data) {
      xml = data.responseXML; 
      });
    
    function searchPics(){
    document.getElementById("results").innerHTML=""
    var term=document.getElementById("inp").value
    var pics = xml.getElementsByTagName("photo");
    for (var i = 0; i < pics.length; i++) {
      var cat =pics[i].getElementsByTagName("category")[0]
      if (cat.firstChild.nodeValue.match(term)){
      document.getElementById("results").innerHTML+=pics[i].getElementsByTagName("name")[0].firstChild.nodeValue+"<br>"
    		}
    	}
    
    }
    
    </script>
    
    </body>

  • #9
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    Thank you, xelawho. I had tried code very similar to that and while it gave me a subset of the thumbnails, if I used previous/next buttons, it still cycled through all of the photo elements. I guess my real question is whether it is possible to modify the initial value of x variable so that it only gets the array of photo elements where the category contains insects?

    var x = xmlDoc.getElementsByTagName("photo");

    Can I initially set x to be xmlDoc.getElementsByTagName("photo[category='insect']") or something along those lines?
    And my actual XML document is well formed, I am just pitiful at retyping on an iPad
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #10
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,302
    Thanks
    13
    Thanked 345 Times in 341 Posts
    Quote Originally Posted by marilynn.fowler View Post
    Can I initially set x to be xmlDoc.getElementsByTagName("photo[category='insect']") or something along those lines?
    that would be XPath. but getElementsByTagName() only accepts tag names, not more, not less.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #11
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    So I'm back to square one. Can anyone point me to a tutorial that deals with this? I took an XML class, but we never touched on this scenario.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by marilynn.fowler View Post
    I guess my real question is whether it is possible to modify the initial value of x variable so that it only gets the array of photo elements where the category contains insects?
    why not just push everything that matches your criteria onto a separate array, or am I missing something fundamental here?

    Code:
    <body>
    <input type="text" id="inp"/><input type="button" value="search" onclick="searchPics()"/> 
    <div id="results"></div>
    <input type="button" value="<" onclick="showPics('down')"/><input type="button" value=">" onclick="showPics('up')"/>
    <script type="text/javascript">
    var xml;
    var tmp;
    
    function downloadUrl(callback) {
    url="gallery.xml"
    var xmlFile = window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject('Microsoft.XMLHTTP');
    	xmlFile.onreadystatechange = function() {
       if (xmlFile.readyState == 4) {
         callback(xmlFile, xmlFile.status);
       }
     };
    xmlFile.open("GET", url, true); 
    xmlFile.send(null);
    }
    
    
    downloadUrl(function(data) {
      xml = data.responseXML; 
      });
    
    function searchPics(){
    tmp=[];
    document.getElementById("results").innerHTML=""
    var term=document.getElementById("inp").value
    var pics = xml.getElementsByTagName("photo");
    for (var i = 0; i < pics.length; i++) {
      var cat =pics[i].getElementsByTagName("category")[0]
      if (cat.firstChild.nodeValue.match(term)){
    tmp.push(pics[i].getElementsByTagName("name")[0].firstChild.nodeValue)
    		}
    	}
    document.getElementById("results").innerHTML=tmp[0]
    }
    
    function showPics(dir){
    if (dir=="up"){
    tmp.push(tmp.shift())
    } else{
    tmp.unshift(tmp.pop())
    	}
    	document.getElementById("results").innerHTML=tmp[0]
    }
    </script>
    
    </body>

  • Users who have thanked xelawho for this post:

    marilynn.fowler (06-08-2012)

  • #13
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    Thank you for replying, xelawho. I'm going to go through it line by line to see if I understand how it works. I got sidetracked by other projects, so I know I'm going to have questions, but I appreciate the time you took giving me an answer.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx


  •  

    Posting Permissions

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