[SOLVED] traversing XML w/ Javascript

[woodsonoversoul]

I have the following xml document:

−
<response>
−
<set>
−
<song>
<song_id>wsp1998-01-01s1s01</song_id>
<song_name>Big Wolly Mammoth</song_name>
</song>
−
<song>
<song_id>wsp1998-01-01s1s02</song_id>
<song_name>All Time Low</song_name>
</song>
</set>
−
<set>
−
<song>
<song_id>wsp1998-01-01s2s01</song_id>
<song_name>Nobody\'s Loss</song_name>
</song>
−
<song>
<song_id>wsp1998-01-01s2s02</song_id>
<song_name>Party at Your Mama\'s Hou</song_name>
</song>
</set>
−
<encore>
−
<song>
<song_id>wsp1998-01-01ses01</song_id>
<song_name>Don\'t Be Denied</song_name>
</song>
−
<song>
<song_id>wsp1998-01-01ses02</song_id>
<song_name>End of the Show</song_name>
</song>
</encore>
</response>

 

Which I want to breakup based on set/encore. I'm really having a problem accessing the individual txt elements within the XML, which is leading me to believe that I may not be loading it correctly. My current code is laughable and contains lots of errors, but I keep trying ideas from different tutorials. Here's my code:

function handleServerResponse(group, artist, expandTo){
  //debug
  alert("expandTo = " + expandTo);
  
  //figure out what the hell this means
  if(expandTo == 'years'){
    group = artist;
  }
  
  //get the abbreviation for the artist
  var new_group = abb(artist);
  
  //debug
  alert("handleServerResponse has been called");
  
  //get the response from the xmlHttp object
  var xmlResponse = xmlHttp.responseXML;
  
  //check to see if the response is any good
  if(!xmlResponse || !xmlResponse.documentElement){
    throw("Invalid XML Structure:\n" + xmlHttp.responseText);
  }
  
  //create the root node
  var rootNodeName = xmlResponse.documentElement.nodeName;
  
  //debug
  alert("xmlResponse.documentElement.nodeName = " + rootNodeName);
  
  //check it
  if(rootNodeName == "parsererror"){
    throw("Invalid XML Strucutre");
  }
  
  xmlRoot = xmlResponse.documentElement;
  
  //WORKING//
  //
   if(expandTo == 'songs'){
      
      //find out where we're putting this (could this go at the end?)
      var myDiv = document.getElementById(group);
      

x=xmlRoot.getElementsByTagName("set")[0]
y=x.childNodes[0];
txt=y.nodeValue;

alert("___" + txt + "___");

      
      //get the elements tagged <set> from <response>
      var setArray = xmlRoot.getElementsByTagName("set");
      
       //debug
       alert("setArray.length should be: " + setArray.length);
       
       for(var z = 0; z < setArray.length; z++){
       var f = setArray[z]; 
       y = f.childNodes[0];
       txt = y.nodeValue;
       alert("!!!" + txt + "!!!");
     }
              
       for(var i = 0; i < setArray.length; i++){
         var newOl = document.createElement('ol');
         newOl.setAttribute('id', group + 's' + i);
         //for(var f = setArray[i],firstChild; f != null; f = f.nextSibling){
           var f = setArray[i],firstChild;
           var newLi = document.createElement('li');
           //assign it values
           newLi.setAttribute('id', f.nodeValue);
           alert("hey look at me!");
           alert('setArray.f.data + = ' + f);
           var newText = document.createElement('h2');
           newText.appendChild(document.createTextNode(f.nextSibling.data));
           newOl.appendChild(newLi);
           //alert('setArray.f.firstChild = ' + f.firstChild.data);
           
           }
          newOl.appendChild(newLi);
           myDiv.appendChild(newOl);
      
      /*cycle through the array
      //for(var i = 1; i < setArray.length + 1; i++){
       //debug <- problem here
       //alert("setArray[0].length = " + setArray[0].length);
      
      //create a new <ol> with id=abbdates?
     //var newOl = document.createElement('ol');
      //newOl.setAttribute('id', group + 's' + i);
      
      //create a for loop to cycle through the elements of the elements of setArray
      for(var n = 1; n < setArray[i].length; n++){
       //create an <li> element
       var newLi = document.createElement('li');
       
       //assign it values
        newLi.setAttribute('id', setArray[i].firstChild.data);
        //debug
        alert("This should be the id: " + setArray[i].nextSibling.data);
        
        //this should be changed
        newLi.setAttribute('class', 'artist');
        
        //create the text
        var newText = document.createElement('h2');
        newText.appendChild(document.createTextNode(setArray.item(i).nextSibling.data));
        
        newOl.appendChild(newLi);
        }//end for(var n)
        
        myDiv.appendChild(newOl);
        }//end for(var i)
      */
      }//end(expandTo == 'songs')
      

 

 

Does anyone see where I first get off-track? All help is greatly appreciated.

[darkfreaks]

you are missing a semi on line 45 and your brackets are unmatched

[woodsonoversoul]

Thanks. I'll try that and report back...

[woodsonoversoul]

I fixed the semicolon but I can't see where my brackets are unmatched. Still no luck. All my alerts come back with null...

[darkfreaks]

Fixed:

function handleServerResponse(group, artist, expandTo){

  alert("expandTo = " + expandTo);


  if(expandTo == 'years'){
    group = artist;
  }


  var new_group = abb(artist);


  alert("handleServerResponse has been called");

  
  var xmlResponse = xmlHttp.responseXML;


  if(!xmlResponse || !xmlResponse.documentElement){
    throw("Invalid XML Structure:\n" + xmlHttp.responseText);
  }


  var rootNodeName = xmlResponse.documentElement.nodeName;


  alert("xmlResponse.documentElement.nodeName = " + rootNodeName);


  if(rootNodeName == "parsererror"){
    throw("Invalid XML Strucutre");
  }

  xmlRoot = xmlResponse.documentElement;


   if(expandTo == 'songs'){
      var myDiv = document.getElementById(group);
     

x=xmlRoot.getElementsByTagName("set")[0];
y=x.childNodes[0];
txt=y.nodeValue;

alert("___" + txt + "___");

     
      
      var setArray = xmlRoot.getElementsByTagName("set");
     
       //debug
       alert("setArray.length should be: " + setArray.length);
       
       for(var z = 0; z < setArray.length; z++){
       var f = setArray[z];
       y = f.childNodes[0];
       txt = y.nodeValue;
       alert("!!!" + txt + "!!!");
     }
             
       for(var i = 0; i < setArray.length; i++){
         var newOl = document.createElement('ol');
         newOl.setAttribute('id', group + 's' + i);
        or(var f = setArray[i],firstChild; f != null; f = f.nextSibling){
           var f = setArray[i],firstChild;
           var newLi = document.createElement('li');
          
           newLi.setAttribute('id', f.nodeValue);
           alert("hey look at me!");
           alert('setArray.f.data + = ' + f);
           var newText = document.createElement('h2');
           newText.appendChild(document.createTextNode(f.nextSibling.data));
           newOl.appendChild(newLi);
alert('setArray.f.firstChild = ' + f.firstChild.data);
           
           }
          newOl.appendChild(newLi);
           myDiv.appendChild(newOl);
     
    
   for(var i = 1; i < setArray.length + 1; i++){
    
     alert("setArray[0].length = " + setArray[0].length);
     
with id=abbdates?
     var newOl = document.createElement('ol');
     newOl.setAttribute('id', group + 's' + i);
     
     
      for(var n = 1; n < setArray[i].length; n++){

       var newLi = document.createElement('li');
       
    
        newLi.setAttribute('id', setArray[i].firstChild.data);
        //debug
        alert("This should be the id: " + setArray[i].nextSibling.data);
       

        newLi.setAttribute('class', 'artist');
       
        //create the text
        var newText = document.createElement('h2');
        newText.appendChild(document.createTextNode(setArray.item(i).nextSibling.data));
       
        newOl.appendChild(newLi);
        } for(var n)
       
        myDiv.appendChild(newOl);
        } for(var i)
}
}
}
  (expandTo == 'songs')

[woodsonoversoul]

I'm getting some weird errors with and don't really understand the line:

 

with id=abbdates?

 

What I'm trying to do is create a nested Ordered List with the main <ol> being the entire xml document and the nested <ol>s being the sets/encore. the List Items would be the songs with the unique_song_id being the <li>'s id attribute and the song_name being the <li> text, if that helps anything...

[darkfreaks]

im sorry i dont see that line ???

[woodsonoversoul]

for(var i = 1; i < setArray.length + 1; i++){
   
     alert("setArray[0].length = " + setArray[0].length);
     
with id=abbdates?
     var newOl = document.createElement('ol');
     newOl.setAttribute('id', group + 's' + i);
     
     
      for(var n = 1; n < setArray[i].length; n++){

       var newLi = document.createElement('li');
       
   
        newLi.setAttribute('id', setArray[i].firstChild.data);
        //debug
        alert("This should be the id: " + setArray[i].nextSibling.data);
       

        newLi.setAttribute('class', 'artist');
       
        //create the text
        var newText = document.createElement('h2');
        newText.appendChild(document.createTextNode(setArray.item(i).nextSibling.data));
       
        newOl.appendChild(newLi);
        } for(var n)
       
        myDiv.appendChild(newOl);
        } for(var i)

 

also, I assume those for(var ...) are meant to be comments. I commented them out but am still having problems. I'm using http://www.javascriptlint.com/online_lint.php as a debugger. Any other suggestions?

[darkfreaks]

the or() statement is completely wrong :-X

 

 

[woodsonoversoul]

Yeah, I changed the or() to for() I assumed that's what you meant

[woodsonoversoul]

How would I even access the data in <song_id> or <song_name>? I keep using .nodeValue and getting null...

[woodsonoversoul]

Nevermind