9 Replies - 857 Views - Last Post: 01 February 2015 - 06:25 AM

#1 hm9  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 30-January 15

Displaying an image from xml feed

Posted 30 January 2015 - 03:07 PM

Hi

I am trying to display and XML API into a web page. all data is displayed apart from the images and url links. They just show the link instead of the actual images or url. The code is shown below. Any idea how to fix this? note if i use the link on the browser , the image or url are displayed correctly



if (window.XMLHttpRequest) {
  
    var xmlhttp = new XMLHttpRequest();
} else {
   
    var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

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


document.write("<table><tr><th>Name</th><th>image</th></tr>");
var x=xmlhttp.getElementsByTagName("products");
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("productImage")[0].childNodes[0].nodeValue);



Thanks

:code:

This post has been edited by Dormilich: 31 January 2015 - 10:10 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Displaying an image from xml feed

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1842
  • View blog
  • Posts: 5,793
  • Joined: 15-January 14

Re: Displaying an image from xml feed

Posted 30 January 2015 - 03:11 PM

There's not enough information there, what does the XML structure look like that the code is trying to access? You use the terms "link", "url", and "image", in your code I see "name" and "productImage". What do you mean by link and url?
Was This Post Helpful? 0
  • +
  • -

#3 hm9  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 30-January 15

Re: Displaying an image from xml feed

Posted 30 January 2015 - 03:23 PM

Below is the snippet of the xml file. Basically, the image with the tag name 'productImage' is displayed as the text 'http://media.expedia.com/hotels/6000000/5160000/5152500/5152449/5152449_27_b.jpg' and not as the actual image

<products>
<product language="en">
<ns2:name>Spinnaker Holidays</ns2:name>
<ns2:description>Spinnaker Holidays</ns2:description>
<ns2:productImage>
http://media.expedia...152449_27_b.jpg
</ns2:productImage>
------------------------------------------------------------------------------------------------------------

again the same problem with the url link below:

<ns2:productUrl>
http://pdt.tradedoub...telcontentfeed)
</ns2:productUrl>
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1842
  • View blog
  • Posts: 5,793
  • Joined: 15-January 14

Re: Displaying an image from xml feed

Posted 30 January 2015 - 04:40 PM

Your Javascript code is just writing out the URL. If you want to display an image you need to use an img tag in HTML.
Was This Post Helpful? 0
  • +
  • -

#5 hm9  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 30-January 15

Re: Displaying an image from xml feed

Posted 31 January 2015 - 11:28 AM

ok thats the bit I am stuck with. not sure how to embed the img tag with the part below

document.write(x[i].getElementsByTagName("productImage")[0].childNodes[0].nodeValue);

any help would be appreciated
Was This Post Helpful? 0
  • +
  • -

#6 baavgai  Icon User is online

  • Dreaming Coder
  • member icon


Reputation: 6996
  • View blog
  • Posts: 14,635
  • Joined: 16-October 07

Re: Displaying an image from xml feed

Posted 31 January 2015 - 02:52 PM

For web dev, before you learn Javascript, you want to learn HTML...

An image tag would simply be:
<img src="your url here" />


Was This Post Helpful? 0
  • +
  • -

#7 hm9  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 30-January 15

Re: Displaying an image from xml feed

Posted 31 January 2015 - 03:27 PM

thats very simple response and already know about it! the question is how to change or modify the code to make it work with javascript code i posted. i know how to display images but not with the code i displayed
Was This Post Helpful? 0
  • +
  • -

#8 astonecipher  Icon User is offline

  • Too busy for this
  • member icon

Reputation: 2343
  • View blog
  • Posts: 9,400
  • Joined: 03-December 12

Re: Displaying an image from xml feed

Posted 31 January 2015 - 06:26 PM

If you already know how to display an image using the url, how is it that you don't know how to turn this

View Posthm9, on 30 January 2015 - 05:23 PM, said:

<products>
<product language="en">
<ns2:name>Spinnaker Holidays</ns2:name>
<ns2:description>Spinnaker Holidays</ns2:description>
<ns2:productImage>
http://media.expedia...152449_27_b.jpg
</ns2:productImage>



Into to an img tag src? document.write() outputs text/ HTML. How difficult is it to modify it and use the img tag within that function. Or were you looking more for a copy paste solution?
Was This Post Helpful? 0
  • +
  • -

#9 baavgai  Icon User is online

  • Dreaming Coder
  • member icon


Reputation: 6996
  • View blog
  • Posts: 14,635
  • Joined: 16-October 07

Re: Displaying an image from xml feed

Posted 31 January 2015 - 07:28 PM

View Posthm9, on 31 January 2015 - 06:27 PM, said:

thats very simple response and already know about it! the question is how to change or modify the code to make it work with javascript code i posted.


So... let me get this straight.

You know how to do this:
document.write("<td>");
document.write(x[i].getElementsByTagName("productImage")[0].childNodes[0].nodeValue);
document.write("</td>");



And you know how to do this:
<img src="your url here" />



But this is beyond you?!?
document.write("<td><img src='");
document.write(x[i].getElementsByTagName("productImage")[0].childNodes[0].nodeValue);
document.write("'/></td>");



Sorry, it looks like you don't understand what you claim to. You might wish to brush up on what you think you know.

As a side note, using document.write is about a decade out of favor. Brush up on DOM methods as well.
Was This Post Helpful? 0
  • +
  • -

#10 hm9  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 30-January 15

Re: Displaying an image from xml feed

Posted 01 February 2015 - 06:25 AM

Thanks for the reply guys. Sorry for misundertanding your responses.
Regarding the DOM Methods, are there any good tutorials that you can recommend to help me achieve what I am trying to do
Thanks
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1