CODEWITHSUNDEEP
javascriptxmlwordpresstagsrss
user4193297
user4193297

Reputation:

How to get img src out of RSS with JavaScript?

I would like to know how I can take the img src out of a item in RSS. I'm using HTML and JavaScript to read out the tags.

HTML & JAVASCRIPT:

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

    var x=xmlDoc.getElementsByTagName("item");
    for (i=0;i<x.length;i++)
      { 
        var title = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
        var linkstr = x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;
        var datestr = x[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue;
        var image = x[i].getElementsByTagName("img")[0].childNodes[0].nodeValue;

        document.write(title);
        document.write(linkstr);
        document.write(datestr);
        document.write(image);
      }
    </script>
</body>
</html>

XML:

<description><![CDATA[<div style="margin: 5px 5% 10px 5%;"><img src="http://website.com/news/1/images/image.jpg" width="90%" /></div>

<content:encoded><![CDATA[<div style="margin: 5px 5% 10px 5%;"><img src="http://website.com/news/1/images/image.jpg" width="90%" /></div><div><p>This is news this is news this is news this is news.</p>
</div><p><a rel="nofollow" href="http://website.com/news/1">This is news</a><a rel="nofollow" href="http://website.com">Website</a>.</p>
]]></content:encoded>

<enclosure url="http://website.com/news/1/images/image.jpg" length="174264" type="image/jpg" />

<media:content xmlns:media="http://search.yahoo.com/mrss/" url="http://website.com/news/1/images/image.jpg" width="640" height="640" medium="image" type="image/jpeg">
    <media:copyright>Website</media:copyright>
</media:content>

<media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://website.com/news/1/images/image.jpg" width="640" height="640" />

So at first I tried things like:

var image = x[i].getElementsByTagName("img")[0].childNodes[0].nodeValue;

var image = x[i].getElementsByTagName("enclosure")[0].childNodes[0].nodeValue;

var image = x[i].getElementsByTagName("url")[0].childNodes[0].nodeValue;

var image = x[i].getElementsByTagName("media:content")[0].childNodes[0].nodeValue;

var image = x[i].getElementsByTagName("media:thumbnail")[0].childNodes[0].nodeValue;

But none of them worked.. I'm using wordpress, at first I search for ways to create my own tags for my RSS where you can put your own content of choice but I wasn't able to do so.

There must be a way to get the img out of the xml file but I don't know how. I've tried looking here but it didn't work for me..

get image out of CDATA and description tag with jquery

Edit:

See here the item element asked for

    <item>
        <title>This is news</title>
        <link>http://website.com/blog/wordpress/this-is-news/</link>
        <comments>http://website.com/blog/wordpress/this-is-news/#comments</comments>
        <pubDate>Wed, 2 Jun 2013 05:12:12 +0000</pubDate>
        <dc:creator><![CDATA[Website]]></dc:creator>
                <category><![CDATA[Uncategorized]]></category>

        <guid isPermaLink="false">http://www.website.com/blog/wordpress/?p=22</guid>
        <description><![CDATA[<div style="margin: 5px 5% 10px 5%;"><img src="http://website.com/blog/wordpress/wp-content/uploads/2014/10/image.jpg" width="90%" /></div>
<div>This is news this is news this is news this is news this is news.</div>
<p>The post <a rel="nofollow" href="http://website.com/blog/wordpress/this-is-news/">This is news</a> appeared first on <a rel="nofollow" href="http://website.com/blog/wordpress">website.com</a>.</p>
]]></description>
                <content:encoded><![CDATA[<div style="margin: 5px 5% 10px 5%;"><img src="http://website.com/blog/wordpress/wp-content/uploads/2014/10/image.jpg" width="90%" /></div><div><p>This is news this is news this is news this is news this is news.</p>
</div><p>The post <a rel="nofollow" href="http://website.com/blog/wordpress/this-is-news/">This is news</a> appeared first on <a rel="nofollow" href="http://website.com/blog/wordpress">website.com</a>.</p>
]]></content:encoded>
            <wfw:commentRss>http://website.com/blog/wordpress/this-is-news/feed/</wfw:commentRss>
        <slash:comments>0</slash:comments>
    <enclosure url="http://website.com/blog/wordpress/wp-content/uploads/2014/10/image.jpg" length="174264" type="image/jpg" />
<media:content xmlns:media="http://search.yahoo.com/" url="http://website.com/blog/wordpress/wp-content/uploads/2014/10/image.jpg" width="640" height="640" medium="image" type="image/jpeg">
    <media:copyright>website.com</media:copyright>
</media:content>
<media:thumbnail xmlns:media="http://search.yahoo.com/" url="http://website.com/blog/wordpress/wp-content/uploads/2014/10/image.jpg" width="640" height="640" />
    </item>

SOLVED:

Replaced

var image = x[i].getElementsByTagName("img")[0].childNodes[0].nodeValue;

For

var img = $(x[i]).find('enclosure').attr('url');

(and you should add jQuery library)

Upvotes: 0

Views: 2781

Answers (2)

Frogmouth
Frogmouth

Reputation: 1818

Try this code, instead yours:

in Wordpress:

var image_URLs = [];
$.ajax({
    url : "news.xml",
    //async : false, //uncomment fot sync use
    success : function(data){
        data = $(data);
        data.find("item").each(function(i){

            var URL = $(this).find("enclosure").attr("url");
            console.log ("img n#"+ i + ":",URL);
            image_URLs.push(URL);
        });
    },
    error : function(a,b,c){
        console.log(a,b,c);
    }
});

looks console of your browser to see if there are some error where jQuery parse XML or if the script find your image.

Locally:

<html>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    var image_URLs = [];
    $.ajax({
        url : "/news.xml",
    //async : false, //uncomment fot sync use
        success : function(data){
            data = $(data);
            data.find("item").each(function(i){

                var URL = $(this).find("enclosure").attr("url");
                console.log ("img n#"+ i + ":",URL);
                image_URLs.push(URL);
            });
        },
        error : function(a,b,c){
            console.log(a,b,c);
        }
    });
    </script>
</body>
</html>

download this source if you want to use jQuery Offline: //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

Upvotes: 0

brandelizer
brandelizer

Reputation: 352

write the xml in a js variable and then you have to use:

var myXML = ....
var split1 = myXML.split('url="');
...
..
.

Or you use jQuery.

Upvotes: 1

Related Questions