Get image source from XML and load it using javascript

Question

I have the following XML file

<PRODUCT>
      <IMAGE><image href="myimage.jpg"/></IMAGE>
      <NAME>TV 47" LCD Full HD Scarlet</NAME>
      <PRICE>4999</PRICE>
</PRODUCT>

As you can see, my element has a href. I can easily get the text data from NAME and PRICE. Now I need to get the href attribute from and load it. This is my script

<script type="text/javascript">
$(function() 
{ 
$.ajax(
{
    type: "GET",
    url: "xml.xml",
    dataType: "xml",
    success: function(xml) 
    {
        $(xml).find('PRODUCT').each(function() 
        {
            var name = $(this).find('NAME').text();
            var price = $(this).find('PRICE').text();
            var image = $(this).find('IMAGE').text();
            $('<p></p>').html(name+'<br />'+price+'<br />'+image).appendTo('#wrap');
        });
    }
});
});
</script>

How do I extract the href attribute and load the corresponding image into a div "wrap"? I tried this Implementing Images in HTML using XML but doesn't work. thank you guys

you should replace your every .find() function from .children() — bugwheels94
– bugwheels94, Commented Jun 7, 2013 at 14:27

bugwheels94 · Accepted Answer · 2013-06-07 14:25:03Z

1

var image = $(this).find('IMAGE').children().attr("href");

To create Object

imgobject=$("<img />").attr("src",image);

answered Jun 7, 2013 at 14:25

bugwheels94

32.1k3 gold badges43 silver badges62 bronze badges

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

3 Comments

cgalvao1993 Over a year ago

should I create an Image object from the var ?

cgalvao1993 Over a year ago

my div displays [object object] in the place of the image, do you now what is happening?

bugwheels94 Over a year ago

it depends how are you inserting the image in the div .Tell me the syntax you are using to insert

Xiaodan Mao · Accepted Answer · 2013-06-07 15:21:43Z

0

You can try:

var imgUrl = $(xml).find("image[href]").attr("href"); 
$yourdiv.append($("<img src=\"" + imgUrl + "\"/>"));

Hope it's helpful.

answered Jun 7, 2013 at 15:21

Xiaodan Mao

1,7062 gold badges17 silver badges32 bronze badges

Comments

cgalvao1993 · Accepted Answer · 2013-06-07 17:01:35Z

0

Get the href attribute this way

var image = $(xml).find("image[href]").attr("href");

Load the content to the div this way

$('#wrap').append($("<img src=\"" +image+"\"/>"));

answered Jun 7, 2013 at 17:01

cgalvao1993

1482 silver badges18 bronze badges

Collectives™ on Stack Overflow

Get image source from XML and load it using javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related