processing xml list into HTML

Question

I hope that someone will be able to help me, I am new to javaScript and XML, at the moment I am trying to process an xml list of products into an ul list in my HTML page. I would like to fetch all the products from xml and display them as the li elements on the page. I have managed to write code to go through the xml but it only returns the last product from the xml list. How could I get all the products? any suggestions welcomed. my code so far:

    <script>
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","product.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 


var x=xmlDoc.getElementsByTagName("product");
for (i=0;i<x.length;i++)
  { 
  liOpen=("<li><p>");
  title=(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
  divOpen=("</p><div class='prod-sq-img'>");
  image=(x[i].getElementsByTagName("imgfile")[0].childNodes[0].nodeValue);
  closingTags=("</div></li>");
  txt=  liOpen +  title + divOpen + image + closingTags ;
document.getElementById("ulList").innerHTML=txt;
  }


        </script>

Thank you for any help

My other code works fine and it gets all the products from the list but I need to pass it into an DIV, any ideas?

document.write("<ul class='prod-sq'>");
var x=xmlDoc.getElementsByTagName("product");
for (i=0;i<x.length;i++)
  { 
  document.write("<li><p>");
  document.write(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
  document.write("</p><div class='prod-sq-img'>");
  document.write(x[i].getElementsByTagName("imgfile")[0].childNodes[0].nodeValue);
  }
document.write("</ul>");

jQuery should help here. think2loud.com/224-reading-xml-with-jquery — Will Hawker
– Will Hawker, Commented Feb 8, 2013 at 8:46
You can follow the process described here. Anyway jQuery also can help a lot. — revoua
– revoua, Commented Feb 8, 2013 at 8:49

New Developer · Accepted Answer · 2013-02-08 09:21:50Z

0

I think changing following line will fix the issue.

document.getElementById("ulList").innerHTML+=txt;

answered Feb 8, 2013 at 9:21

New Developer

3,33313 gold badges45 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kingk · Accepted Answer · 2013-02-08 09:15:58Z

0

try this..

     var liOpen=("<li><p>");
      var divOpen=("</p><div class='prod-sq-img'>");  
      var closingTags=("</div></li>");
    var txt;
    var image;
    var title;
var y=xmlDoc.getElementsByTagName("product");
    for (j=0;j<y.length;j++)        {
    var x=xmlDoc.getElementsByTagName("product");
    for (i=0;i<x.length;i++)
      { 
      title=(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
      image=(x[i].getElementsByTagName("imgfile")[0].childNodes[0].nodeValue);
      txt=  liOpen +  title + divOpen + image + closingTags ;
      }

    document.getElementById("ulList").innerHTML=txt;  }

edited Feb 8, 2013 at 9:15

answered Feb 8, 2013 at 9:00

Kingk

1,02111 silver badges13 bronze badges

2 Comments

Kugarek Over a year ago

Hi, thank you for posting an answer, unfortunately the code still produces only the last item from the xml list ;(

Kugarek Over a year ago

still the same, basically I have other version of the same code which produces the correct output (gets all products from the xml) I need the output to be passed into an div the other code: document.write("<ul class='prod-sq'>"); var x=xmlDoc.getElementsByTagName("product"); for (i=0;i<x.length;i++) { document.write("<li><p>"); document.write(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue); document.write("</p><div class='prod-sq-img'>"); document.write(x[i].getElementsByTagName("imgfile")[0].childNodes[0].nodeValue); } document.write("</ul>");

Collectives™ on Stack Overflow

processing xml list into HTML

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related