CODEWITHSUNDEEP
javascripthtmlxmlimage
cgalvao1993
cgalvao1993

Reputation: 148

Get image source from XML and load it using javascript

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

Upvotes: 1

Views: 7141

Answers (3)

cgalvao1993
cgalvao1993

Reputation: 148

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+"\"/>"));

Upvotes: 0

Xiaodan Mao
Xiaodan Mao

Reputation: 1706

You can try: 

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

Hope it's helpful.

Upvotes: 0

bugwheels94
bugwheels94

Reputation: 31940

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

To create Object

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

Upvotes: 1

Related Questions