Display image from XML problems

**hafizsteen** · 10-16-2012, 09:43 AM

Hi Guys

I am very new at this. I have a simple html code below:

HTML Code:

<html>
<body>

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

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("product");
for (i=0;i<x.length;i++)
  {
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
document.write("</table>");
</script>

</body>
</html>

and XML code below:

Code:

<product>
   <name>Hafiz</name> 
   <description>test</description> 
  <imageurl>http://www.flyme2u.com/letstravelplease.jpg</imageurl> 
</product>

The thing is, i got no problem displaying the text but i am seriously having problems making the html display the Images(tag:imageurl) from the XML

Need help guys please, appreciate it......

**jscheuer1** · 10-16-2012, 05:15 PM

This has nothing to do with it, but you shouldn't document.write each line. Some browsers might close the table before you're finished writing it to the page. As for creating an image tag out of that, unless the node value of the imageurl tag is invalid xml for some reason, I'd just use it as the src attribute of an image tag. So combining that with my advice on not writing each line separately, I would replace:

Code:

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("product");
for (i=0;i<x.length;i++)
  {
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
document.write("</table>");

with:

Code:

var tableHTML = "<table border='1'>", x = xmlDoc.getElementsByTagName("product");
for (i = 0; i < x.length; ++i)
  {
  tableHTML += "<tr><td>";
  tableHTML += x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
  tableHTML += "</td><td>";
  tableHTML += x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
  tableHTML += "</td><td>";
  tableHTML += "<img src='" + x[i].getElementsByTagName("imageurl")[0].childNodes[0].nodeValue + '" alt=''>";
  tableHTML += "</td></tr>";
  }
tableHTML += "</table>");
document.write(tableHTML);

**hm9** · 01-20-2015, 09:12 PM

Hi John

I came across your solution on this forum as I had the same problem and tried to apply your solution but didnt seem to work. nothing is returned. could you please double check your code or find below my code and let me know if there is anything missing?

Thanks

Code:

<script>

if (window.XMLHttpRequest) {
    //Firefox, Opera, IE7, and other browsers will use the native object
    var xmlhttp = new XMLHttpRequest();
} else {
    //IE 5 and 6 will use the ActiveX control
    var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}


xmlhttp.open("GET","url link",false);
xmlhttp.send();
xmlhttp=xmlhttp.responseXML; 

 

var tableHTML = "<table border='1'>", x = xmlhttp.getElementsByTagName("offers");
for (i = 0; i < x.length; ++i)
  {
  tableHTML += "<tr><td>";
  tableHTML += x([i].getElementsByTagName("programName")[0].childNodes[0].nodeValue);
  tableHTML += "</td><td>";
  tableHTML += x([i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
  tableHTML += "</td><td>";
  tableHTML += "<img src='" + x([i].getElementsByTagName("programLogo")[0].childNodes[0].nodeValue) + '" alt=''>";
  tableHTML += "</td></tr>";
  }
tableHTML += "</table>");
document.write(tableHTML);



</script>

**jscheuer1** · 01-22-2015, 01:59 AM

There are many syntax errors in the table string creation code:

Code:

var tableHTML = "<table border='1'>", x = xmlhttp.getElementsByTagName("offers");
for (i = 0; i < x.length; ++i)
  {
  tableHTML += "<tr><td>";
  tableHTML += x([i].getElementsByTagName("programName")[0].childNodes[0].nodeValue);
  tableHTML += "</td><td>";
  tableHTML += x([i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
  tableHTML += "</td><td>";
  tableHTML += "<img src='" + x([i].getElementsByTagName("programLogo")[0].childNodes[0].nodeValue) + '" alt=''>";
  tableHTML += "</td></tr>";
  }
tableHTML += "</table>");

It should be:

Code:

var tableHTML = "<table border='1'>", x = xmlhttp.getElementsByTagName("offers");
for (i = 0; i < x.length; ++i)
  {
  tableHTML += "<tr><td>";
  tableHTML += x[i].getElementsByTagName("programName")[0].childNodes[0].nodeValue;
  tableHTML += "</td><td>";
  tableHTML += x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;
  tableHTML += "</td><td>";
  tableHTML += "<img src='" + x[i].getElementsByTagName("programLogo")[0].childNodes[0].nodeValue + "' alt=''>";
  tableHTML += "</td></tr>";
  }
tableHTML += "</table>";

If there's still a problem -

Have you tested to determine if you have a valid XML object? Like here:

Code:

xmlhttp.open("GET","url link",false);
xmlhttp.send();
xmlhttp=xmlhttp.responseXML; 
alert(xmlhttp);

You should get something like (depending upon the browser):

[object]

XML OBJECT

If you get null or anything that's not an object, there's a problem fetching the content. If you get an object of some sort, the next thing to test is the the assumption that the object you have there has a:

Code:

xmlhttp.getElementsByTagName("offers")

like:

Code:

var tableHTML = "<table border='1'>", x = xmlhttp.getElementsByTagName("offers");
alert(x.length);

That has to be at least 1 or you will have no output. If it's not 1 or more or not a number, there's a problem. Check that there are any tags:

Code:

alert(xmlhttp.getElementsByTagName("*").length);

If all that checks out and there are still problems determine if the child tags you are looking for in the XML object are there - use a similar strategy for each as already outlined.

Two more bits of advice - often you must test things like this live (or on a localhost server that simulates a live web installation), and all files must be on the same domain, otherwise there will be a same origin policy security violation in any modern browser.

If you want more help, please post a link to the page on your site that shows the problem.

**hm9** · 01-25-2015, 02:37 PM

Thanks John. The page passed the tests in terms of object, number of elements and tags, but it still does not show anything.please find below the test page. the url link there shows the actual xml file. It may be browser issues but i certainly need it to work in IE, Chrome and firefox. or it may be the nodes in the xml file.

http://www.discountedtravels.co.uk/marmaris.aspx

Thanks in advance

**jscheuer1** · 01-25-2015, 03:41 PM

Two more bits of advice - often you must test things like this live (or on a localhost server that simulates a live web installation), and all files must be on the same domain, otherwise there will be a same origin policy security violation in any modern browser.

The 'GET':

Code:

xmlhttp.open("GET","http://api.tradedoubler.com/1.0/products.xml;q=holidays?token=96CC0E0A10851500F10431D64EC5585BFC8597DF",false);

is on a different domain than the page fetching it (discountedtravels.co.uk).

There could still also be other problems.

Here's a working demo:

http://home.comcast.net/~jscheuer1/s...l/readxml2.htm

No images - I didn't make/use any most browsers will display the broken image token in their place, and - if the images were present would show them.

**hm9** · 01-26-2015, 11:45 AM

Ok I understand you point but the only way I can use their data is to connect to their API from my site using that link, so it will be on a different domain. the third party API site will always be on a different domain and I dont want to download data on my site as it will not be live

Note I can see all the other data except for images and hyperlink

Unless there are other options? want something similar to what comparison websites use

**jscheuer1** · 01-26-2015, 03:48 PM

Mmm, well a lot depends on why you want to do this (what use you would be putting it to) and upon tradedoubler.com's policies regarding its data. If you're doing this live for others to use and you have permission from tradedoubler.com to use it, you could conceivably have your server download the xml file periodically - say, every ten minutes, that should be current enough.

Or, if it's only for your private use, again, you could download the file periodically. I see your server is using aspx. I'm not sure how the download would be accomplished using that, but I'm sure it's possible. As an experiment I used PHP and CURL. I first tried PHP alone, but although some of the file was received, it was corrupted. Adding CURL seemed to do the trick. I know little of how that's done, I just Googled it and copied the first likely looking CURL code for it I found.

But, if you don't have permission to use the data from tradedoubler.com and you're publishing it live, that's against the policy of this forum and probably illegal.

As an example - I really like baseball. During the season, EXPN has this crawl that you can buy from them for your website, or it might be free and the say you can only use their data in their crawl - whatever. There's no permission to use it for anything else. It is in an xml file. And I don't like the crawl. So - for my own use only I download the xml file whenever I want to see the scores updated. This is just for me, so it's not stealing. If I were to publish it, it would be. And at that point it would be against the policy of this forum. However, if my live page didn't get all that much traffic and/or didn't really harm EXPN in any way, I mght get away with it. If I made a lot of money off of my site (in direct subscriptions and/or indirect ad revenue) and received the exact sort of visitor EXPN normally does, then they could sue me and probably win. Even without that, an overzealous copyright attorney working for EXPN could probably get me to remove the stolen data from my site.

**hm9** · 01-26-2015, 06:10 PM

Hi John,

I have full permission to use their API and display it on the site so no worries about the copyright.
I am not editing anything. Just display which is already agreed by them

Thanks

**jscheuer1** · 01-26-2015, 06:31 PM

Well then, do you know how to or can you find out how to use aspx to download the xml file? If so, I can show you how to integrate that into a page that will show the data you want from it. We can set it to only refetch the xml if - say, 10 minutes have past since the last time.

One other thought I had is that they may have an interface that you can use, like a script on their server that you can run on your page to bring you the data from their server. Because of the same domain policy mentioned earlier, many api's are done that way.