How to fetch .xml data into html using jquery?

Question

I am trying to generate the thumbnail by fetching the xml data and for now I am only fetching image url from xml file and displaying it in thumbnail.

But unable to do the operation. Check the code and correct me.

<!--portfolio.xml>
<? xml version="1.0" encoding="utf-8" ?> 
<portfolio>
  <thumbnail title="POS" imageurl="img/pos.jpg">
    <type>Windows</type>
    <client> New zealand </client>
    <duration> 1 year </duration>
    <description> POS loream ipsum pos loream ipsum </description>
</thumbnail>

<thumbnail title="Milk Dairy" imageurl="img/milk.jpg">
    <type>Android</type>
    <client> Bangalore milk corp </client>
    <duration> 6 months </duration>
    <description> Milk Loream Ipsum  Ipsum Milk Loream Ipsum  </description>
</thumbnail>
</portfolio>
<!-- index.html>
<div class="row" id="thumb">

</div>
<script>
   //for hosting in server
    $.ajax({
            type:"GET",
            url:"portfolio.xml",
            dataType:"xml",
            success:function(xml)
            {
                var xmlDoc=$.parseXML(xml);
                $(xmlDoc).find('thumbnail').each(function()
                {
                    var $thumbnail=$(this);
                    var imageurl=$thumbnail.attr('imageurl');
                    var thumb=$('<div class="col-xs-6 col-md-3"> </div>');
                    var ref = $('<a href="#" class="thumbnail"></a>').appendTo(thumb);
                    var img = $('<img src="'+imageurl+'" alt="image">').appendTo(ref);
                    $(img).appendTo("#thumb");
                });
            }

        });
//running locally in my pc
/*$.get('portfolio.xml', function(d){
                    $(d).find('thumbnail').each(function()
                    {
                        var $thumbnail=$(this);
                        var imageurl=$thumbnail.attr('imageurl');
                        var thumb=$('<div class="col-xs-6 col-md-3"> </div>');
                        //var thumb = '<div class="col-xs-6 col-md-3"> </div>';
                        var ref = $('<a href="#" class="thumbnail"> </a>').appendTo(thumb);
                        var img= $('<img src="'+imageurl+'" alt="image">').appendTo(ref);
                        //var inner=$($(ref)).append($(img));
                        //var outer=$($(thumb)).append($(inner));
                        $(img).appendTo("#thum");
                    });
                });*/
</script>

This is the first line of portfolio.xml file <portfolio>

Mr.arrogant
– Mr.arrogant

2015-12-16 10:17:56 +00:00
Commented Dec 16, 2015 at 10:17 — Mr.arrogant
– Mr.arrogant, Commented Dec 16, 2015 at 10:17

dadarya · Accepted Answer · 2015-12-16 10:49:06Z

1

remove space between "<?" and "xml" in first line of portfolio.xml replace your first line by 

    <?xml version="1.0" encoding="utf-8" ?>

and remove parse xml from ajax because you are already getting xml type data

$.ajax({
            type:"GET",
            url:"portfolio.xml",
            dataType:"xml",
            success:function(xml)
            {

                $(xml).find('thumbnail').each(function()
                {
                    var $thumbnail=$(this);
                    var imageurl=$thumbnail.attr('imageurl');
                    var thumb=$('<div class="col-xs-6 col-md-3"> </div>');
                    var ref = $('<a href="#" class="thumbnail"></a>').appendTo(thumb);
                    var img = $('<img src="'+imageurl+'" alt="image">').appendTo(ref);
                    $(img).appendTo("#thumb");
                });
            }

        });

edited Dec 16, 2015 at 10:49

answered Dec 16, 2015 at 10:28

dadarya

3131 silver badge6 bronze badges

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

Collectives™ on Stack Overflow

How to fetch .xml data into html using jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related