• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 279
  • Last Modified:

Need help with displaying XML data on webpage

Dear Experts,

I am new to XML and XLST but am trying to figure out to display data on my webpage.

Here is the what the html looks like:

Just using fillers for now....

        
<ul class="column">
  <!--eqblock-->
  <li>
      <section class="block">
        <a href="#"><img src="../images/folder-file.jpg" alt=""  /></a> 
          <h2><a href="#">Coffee 101</a></h2> 
          <p>Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Curabitur in odio augue. Morbi congue auctor interdum. Phasellus sit amet metus justo. </p> 
      </section>
  </li>

  <!--eqblock-->
  <li>
      <section class="block">
        <a href="#"><img src="../images/folder-file.jpg" alt=""  /></a> 
          <h2><a href="#">All About Beans</a></h2> 
          <p>Morbi congue auctor interdum. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Curabitur in odio augue. Phasellus sit amet metus justo. </p> 
      </section>
  </li>

  <!--eqblock-->
  <li>
      <section class="block">
        <a href="#"><img src="../images/folder-file.jpg" alt=""  /></a> 
          <h2><a href="#">Compatible Foods</a></h2> 
          <p>Phasellus sit amet metus justo. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Curabitur in odio augue. Morbi congue auctor. </p> 
      </section>
  </li>

  <!--eqblock-->
  <li>
      <section class="block">
        <a href="#"><img src="../images/folder-file.jpg" alt=""  /></a> 
          <h2><a href="#">Coffee Sizzle</a></h2> 
          <p>Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Morbi congue auctor interdum. Curabitur in odio augue. Phasellus sit amet metus justo. </p> 
      </section>
  </li>

  <!--eqblock-->
  <li>
      <section class="block">
        <a href="#"><img src="../images/folder-file.jpg" alt=""  /></a> 
          <h2><a href="#">Tools of the Trade</a></h2> 
          <p>Curabitur in odio augue. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Morbi congue auctor interdum. Phasellus sit amet metus justo. </p> 
      </section>
  </li>

  <!--eqblock-->
  <li>
      <section class="block">
        <a href="#"><img src="../images/folder-file.jpg" alt=""  /></a> 
          <h2><a href="#">The Art of Making Coffee</a></h2> 
          <p>Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Phasellus sit amet metus justo. Curabitur in odio augue. Morbi congue auctor interdum.  </p> 
      </section>
  </li>

  <!--eqblock-->
  <li>
      <section class="block">
        <a href="#"><img src="../images/folder-file.jpg" alt=""  /></a> 
          <h2><a href="#">Coffee Style</a></h2> 
          <p>Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Curabitur in odio augue. Morbi congue auctor interdum. Phasellus sit amet metus justo. </p> 
      </section>
  </li>
          <!--eqblock-->
  <li>
      <section class="block">
        <a href="#"><img src="../images/folder-file.jpg" alt=""  /></a> 
          <h2><a href="#">Coffee Style</a></h2> 
          <p>Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Curabitur in odio augue. Morbi congue auctor interdum. Phasellus sit amet metus justo. </p> 
      </section>
  </li>

Open in new window


What I would like to do is to extract the value for the bullet tags above from an XML file. One image and two txt (header) and (body). This is what I have so far for my XML file:

<?xml version="1.0" encoding="ISO-8859-1"?>
<daresource>
 <resource category="ela">
   <daimage><a href="www.resourcelink.com"><img src="../images/folder-file.jpg"></a></daimage>
   <heading>6+1 Traits </heading>
   <blurb>This is a great site to get resources.</blurb>
 </resource>
 <resource category="ela">
   <daimage><a href="www.resourcelink.com"><img src="../images/folder-file.jpg"></a></daimage>
   <heading><a href="www.resourcelink.com">6+1 Traits</a></heading>
   <blurb>This is another great site to get resources.</blurb>
 </resource>
 <resource category="ela">
   <daimage><a href="www.resourcelink.com"><img src="../images/folder-file.jpg"></a></daimage>
   <heading><a href="www.resourcelink.com">6+1 Traits</a></heading>
   <blurb>This is one more wonderful site to get resources.</blurb>
 </resource>
 <resource category="ela">
   <daimage><a href="www.resourcelink.com"><img src="../images/folder-file.jpg"></a></daimage>
   <heading><a href="www.resourcelink.com">6+1 Traits</a></heading>
   <blurb>This is a great site to get resources.</blurb>
 </resource>

 <resource category="ela">
   <daimage<a href="www.resourcelink.com"><img src="../images/folder-file.jpg"></a></daimage>
   <heading><a href="www.resourcelink.com">6+1 Traits</a></heading>
   <blurb>This is a great site to get resources.</blurb>
 </resource>

 <resource category="ela">
   <daimage><a href="www.resourcelink.com"><img src="../images/folder-file.jpg"></a></daimage>
   <heading><a href="www.resourcelink.com">6+1 Traits</a></heading>
   <blurb>This is a great site to get resources.</blurb>
 </resource>

 <resource category="ela">
   <daimage><a href="www.resourcelink.com"><img src="../images/folder-file.jpg"></a></daimage>
   <heading><a href="www.resourcelink.com">6+1 Traits</a></heading>
   <blurb>This is a great site to get resources.</blurb>
 </resource>

</daresource>

Open in new window


I was reading where someone did not recommend child attributes so need your recommendation whether to use  <resource category="ela"> or some other tag. The idea is that these are online resources for ELA (english language arts). The image and the header need to be clickable and go to the resource. I don't know how I would do that.

Using this javascript:
<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","note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

document.getElementById("image").innerHTML=
xmlDoc.getElementsByTagName("daimage")[0].childNodes[0].nodeValue;
document.getElementById("heading").innerHTML=
xmlDoc.getElementsByTagName("heading")[0].childNodes[0].nodeValue;
document.getElementById("blurb").innerHTML=
xmlDoc.getElementsByTagName("blurb")[0].childNodes[0].nodeValue;
</script>

Open in new window



Would my new line in the HTML document look like this?

 <!--eqblock-->
  <li>
      <section class="block"><span id="image"></span> /></a> 
          <h2><span id="image"></span></h2> 
          <p><span id="blurb"></span></> </p> 
      </section>
  </li>

Open in new window


Thanks in advance. I really need someone with XML expertise to look over this code and provide suggestions or help to get this to work.
0
shogun5
Asked:
shogun5
  • 3
  • 2
1 Solution
 
shogun5Author Commented:
Sorry all the coding did not show.

Current HTML:


 <!--eqblock-->
<li>
 <section class="block">
<a href="#"><img src="../images/folder-file.jpg" alt=""  /></a>
<h2><a href="#">Coffee 101</a></h2>
<p>Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Curabitur in odio augue. Morbi congue auctor interdum. Phasellus sit amet metus justo. </p>
   </li>

With XML pull:

<!--eqblock-->
<li>
<section class="block"><span id="image"></span> /></a>
<h2><span id="image"></span></h2>
<p><span id="blurb"></span></> </p>
  </section>
 </li>
0
 
Michel PlungjanIT ExpertCommented:
Did you try?
0
 
shogun5Author Commented:
Yes. Data is not showing...
0
 
Michel PlungjanIT ExpertCommented:
Any errors in the console? Can you make a jsfiddle.net or give a URL?
0
 
shogun5Author Commented:
Okay...I can work with this...thanks!
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now