Search jQuery

jQuery Forum

Get image url from media:content in RSS XML feed

in Using jQuery Plugins • 9 years ago

I am trying to retrieve the images (along with other content) from media:content for each post in an RSS feed: http://bits.blogs.nytimes.com/feed/

I have tried several variations and I am ending up with <img src="undefined" alt="image">

This is what the log is saying TypeError: 'undefined' is not an object (evaluating '$item.find('media\\:content').attr('url').text')

Here is an example of the XML from the RSS feed (I am trying to grab what is in url="this value")<media:content url="http://graphics8.nytimes.com/images/2011/11/30/technology/bits-daily-report/bits-daily-report-thumbStandard.jpg" medium="image" width="75" height="75"></media:content>

I tried this link (along with many others) jQuery XML parsing how to get element attribute but I am still getting errors.

There is a PHP file as well (see at bottom) but I don't think that it is the issue.

Here is the HTML with jQuery embeded (pulled from https://forum.jquery.com/topic/rssparsing-images-27-8-2010).

Thank you for all solutions, pointers, and Suggestions. I am hitting a roadblock right now.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Site Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function get_rss_feed() {
// Using CNN's RSS Feed as an example
var rssUrl = 'http://bits.blogs.nytimes.com/feed/';
//clear the content in the div for the next feed.
$("#feedContent").empty();
//use the JQuery get to grab the URL from the selected item, put the results in to an argument for parsing in the inline function called when the feed retrieval is complete
$.get('rss.php?url='+rssUrl, function(d) {
//find each 'item' in the file and parse it
$(d).find('item').each(function() {
//name the current found item this for this particular loop run
var $item = $(this);
// grab the post title
var title = $item.find('title').text();
// grab the post's URL
var link = $item.find('link').text();
// next, the description
var description = $item.find('description').text();
//don't forget the pubdate
var pubDate = $item.find('pubDate').text();
var media = $item.find('media\\:content').attr('url').text();
// now create a var 'html' to store the markup we're using to output the feed to the browser window
var html = "<div class=\"entry\"><h2 class=\"postTitle\">" + title + "<\/h2>";
html += "<em class=\"date\">" + pubDate + "</em>";
html += "<p class=\"description\">" + description + "</p>";
html += "<img src=\"" + media + "\" alt=\"image\"/>";
html += "<a href=\"" + link + "\" target=\"_blank\">Read More >><\/a><\/div>";
//Send Results to a div
$('#rss').append($(html));
});
});
};
get_rss_feed();
});
</script>
</head>
<body>
<h1>RSS TEST</h1>
<div id="rss"></div>
</body>
</html>

Here is the Associated PHP:

<?php

  ob_start();

  $curl = curl_init($_GET['url']);

  curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($curl, CURLOPT_HEADER, false);

  $xml = curl_exec($curl);  
  header("Content-Type: text/xml");
  echo $xml; // Results

  $output = ob_get_clean();

  curl_close($curl);
  echo $output;

  ob_end_flush();


?>

Replies(22)

jakecigar

Re: Get image url from media:content in RSS XML feed

9 years ago

line 38

var media = $item.find('media\\:content').attr('url').text();

should probably be be

var media = $item.find('media\\:content, content').attr('url');

var media = $item.find('[nodeName="media:content"]’).attr('url');

JΛ̊KE

commandz

Re: Get image url from media:content in RSS XML feed

9 years ago

I already tried the below before I posted:

var media = $item.find('media\\:content, content').attr('url');

I tried the second suggestion (below)

var media = $item.find('[nodeName="media:content"]’).attr('url');

It gave the error: Semantic Issue Expected Token ')'

So I modified it to:

var media = $item.find(nodeName='media:content').attr('url');

And again the img src was undefined.

jakecigar

Re: Get image url from media:content in RSS XML feed

9 years ago

My first selector should work.

http://home.jejaju.com/play/rss/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:'y.xml',
success:function(data){
$(data).find('item').each(function(){
var $item=$(this)
var media = $item.find('media\\:content,content').attr('url')
alert(media)
})
},
})
})
</script>
</head>
<body>
</body>
</html>

reads in

<?xml version="1.0" encoding="UTF-8"?> <rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
xmlns:nyt="http://www.nytimes.com/namespaces/rss/2.0" xmlns:media="http://search.yahoo.com/mrss/" >
<foo>
<item>
<media:content url="http://graphics8.nytimes.com/images/2011/11/30/technology/bits-daily-report/bits-daily-report-thumbStandard.jpg" medium="image" width="75" height="75">
</media:content>
</item>
</foo>
</rss>

JΛ̊KE

commandz

Re: Get image url from media:content in RSS XML feed

9 years ago

Jake,

Thanks for hanging with me here. You are correct. Newb mistake. Your first option does correctly parse the XML.

I didn't get the part media:content,content right. I had 'media:content'.

Why does 'media:content,content' work but not 'media:content'?

Thanks for the help!

jakecigar

Re: Get image url from media:content in RSS XML feed

9 years ago

One of these browsers is not like the others.
One of these browsers just doesn’t belong.
Can you tell which browser is not like the others
By the time I finish my song?

It’s for IE.

JΛ̊KE

commandz

Re: Get image url from media:content in RSS XML feed

9 years ago

What you're not using IE 6?

I made a few changes/additions.

I changed

$(d).find('item').each(function() {

To:

$(d).find('item').each(function(index) {

I added (to limit to three feed items):

if (index >= 3) { return false }

And I added (if there was no image defined set to blank image):

if (typeof mediatest === 'undefined') { var mediatest = 'blank.png' };

Everything works great...at least so far :)

Thanks for the help.

Andy

jakecigar

Re: Get image url from media:content in RSS XML feed

9 years ago

You’re proceeding very well! I wonder if there are non-image media:content as well. I added a test for them, rather than using blank images. You might want to test if the medium is image.

success:function(data){
$(data).find('item').each(function(){
var $item=$(this)
var content= $item.find('media\\:content,content')
if(content.attr('medium')=='image')
$('<img/>').attr({
src:content.attr('url'),
height:content.attr('height'),
width:content.attr('width'),
}).appendTo('body')
alert(media)
})
},

JΛ̊KE

commandz

Re: Get image url from media:content in RSS XML feed

9 years ago

Thanks for the improvement suggestions!

I ran into another issue and fixed it but I was wondering how to do this a different way.

One of the feeds that I was parsing was picking up not only the <title> tag but also the <media:title> tag as well from this line:

var title = $item.find('title').text();

I fixed it by changing it to this:

var title = $item.find('title').first().text();

At least in this feed, the actual <title> tag is always first.

Is there a way to specify only the <title> tag and not have it pick up <media:title>?

Here is a link to the xml that I am parsing so you have context: http://feeds.feedburner.com/techcrunch/apple?format=xml

Thanks,

Andy

jakecigar

Re: Get image url from media:content in RSS XML feed

9 years ago

Can I assume you are testing in some old version of IE?

http://home.jejaju.com/play/rss/better.html attempts to differentiate the nodes by nodeName

$item.find('title').filter(function(){return this.nodeName=="title"}).each(function(){
$('body').append('<h2>'+$(this).text()+'<\/h2>')
})

Let me know what IE shows.

Safari shows

lightning-connector

The Sweet, Sweet Cruelty Of Apple’s New Lightning Connector For iPhone 5

NYPD

NYPD Launches ‘Anti-Apple Picking Campaign’ To Protect iPhone Owners From Thefts

JΛ̊KE

commandz

Re: Get image url from media:content in RSS XML feed

9 years ago

I am testing in older versions of IE, but only because I have to. My main browsers are Chrome, FF, Safari on a Mac running 10.8

I hop over to Win 7 and/or Ubuntu 12.04 to test compatibility.

I will test this out.

jakecigar

Re: Get image url from media:content in RSS XML feed

9 years ago

Because of all the name spaces in a typical RSS feed, I looked for better searching methods on the ’net.

I didn’t find any. So I wrote

http://home.jejaju.com/play/rss/best.html

A tiny plugin and a utility function make it easier to search for namespaced tags. It works in FF/Safari & Opera. Does it work in old IE??

$.fn.findTagNS= function(ns,tag){
var els=[]
this.each(function(){
Array.prototype.push.apply(els,this.getElementsByTagNameNS(ns,tag))
})
return $(els)
}
$.ns=function(X){
var ns={},
xml=X.childNodes[X.childNodes.length-1];
$.each(xml.attributes,function(i,v){
ns[v.name.split(/:/)[1]] = v.value
})
return ns
}

JΛ̊KE

commandz

Re: Get image url from media:content in RSS XML feed

9 years ago

Best.html breaks on (Under IE 8 and IE 8 running in 7 mode):

Object doesn't support this property or method
Lines 10 and 25

Better.hmtl: breaks running IE 8 in 7 mode (it works fine in IE8 reg):

Object doesn't support this property or method
Lines 10 and 25,
Expected identifier, string or number on line 36

Neither of them work under quirks mode of course. Both of them work fine on my other browsers.

jakecigar

Re: Re: Get image url from media:content in RSS XML feed

9 years ago

Line 36 was a trailing comma. It’s gone now.

line 25 may be fixed as well,

line 10 got re-written longer that may make IE happier.

I added a meta that should keep IE out of quirks mode.

Please try best again.

JΛ̊KE

commandz

Re: Get image url from media:content in RSS XML feed

9 years ago

Under IE8 (IE7 mode under 8 is getting the same response this time):

Line 12 errors out:

Object doesn't support this property or method

This was highlighted:

t=this.getElementsByTagNameNS(ns,tag)

Line 29 errors out:

Object doesn't support this property or method

The whole function is highlighted starting with: $(function(){

You gotta love IE...

jakecigar

Re: Get image url from media:content in RSS XML feed

9 years ago

Does best now alert "http://search.yahoo.com/mrss/" ?

JΛ̊KE

commandz

Re: Get image url from media:content in RSS XML feed

9 years ago

Under IE8 and IE7(*8) it alerts though it errors out on line 12 and 29. The same object doesn't support property error.

jakecigar

Re: Get image url from media:content in RSS XML feed

9 years ago

http://home.jejaju.com/play/rss/test.html incorporates some ideas from http://www.codingforums.com/archive/index.php/t-108021.html

does it work any better?

JΛ̊KE

commandz

Re: Get image url from media:content in RSS XML feed

9 years ago

It works! It loaded fine in IE8 and IE 7(*8) and in IE6 under IETester.

jakecigar

Re: Re: Get image url from media:content in RSS XML feed

9 years ago

I’m going to clean it up a bit… I’ll give you a final version soon.

JΛ̊KE

jakecigar

Re: Get image url from media:content in RSS XML feed

9 years ago

http://home.jejaju.com/play/rss/ is a bit cleaned up.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
<script type="text/javascript">
"use strict";
$.fn.findTagNS= function(ns,tag){
var els=[]
if (document.getElementsByTagNameNS){
this.each(function(){
Array.prototype.push.apply(els,this.getElementsByTagNameNS(ns,tag))
})
}else{ // ie kluge mode!
var tg=ns?ns+':'+tag:tag;
this.each(function(){
for(var i=0, t=this.getElementsByTagName(tg);i<t.length;i++){
els.push(t[i])
}
})
}
return $(els)
}
$.ns=function(X){
var ns={},
xml=X.documentElement,
standards=document.getElementsByTagNameNS;
$.each(xml.attributes,function(i,v){
var nameSpace=v.name.split(/:/)[1]
ns[nameSpace] = standards?v.value:nameSpace
})
return ns
}
$.ajax({ // note that I don't wait for ready here!
url:'/http.cgi?http://feeds.feedburner.com/techcrunch/apple?format=xml',
success:function(data){
$(function(){ // I wait for ready after the AJAX is done!
var ns=$.ns(data)
$(data).find('item').each(function(){
$(this).findTagNS(ns.media,"content").first().each(function(){
var content=$(this)
$('<img/>').attr({
src:content.attr('url'),
height:content.attr('height'),
width:content.attr('width')
}).appendTo('body')
$('body').append('<h3>'+content.text()+'<\/h3>')
})
$(this).findTagNS(ns.atom,"title").each(function(){
$('body').append('<h3>'+$(this).text()+'<\/h3>')
})
$(this).findTagNS(null,"title").each(function(){
$('body').append('<h2>'+$(this).text()+'<\/h2>')
})
$('body').append('<hr>')
})
})
}
})
</script>
<title>techcrunch</title>
</head>
<body>
</body>
</html>

JΛ̊KE

commandz

Re: Get image url from media:content in RSS XML feed

9 years ago

Wow. I am going to have to study this.

If you were going to limit this to "n" number of returned feed items would you use an "if" statement?

Andy

jakecigar

Re: Get image url from media:content in RSS XML feed

9 years ago

You can use .slice() – jQuery API to get a some number of elements.

You can also break out of a .each loop by returning false (also good for getting some elements)

.each() – jQuery API (last example)

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Get image url from media:content in RSS XML feed

Replies(22)

Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

lightning-connector

The Sweet, Sweet Cruelty Of Apple’s New Lightning Connector For iPhone 5

NYPD

NYPD Launches ‘Anti-Apple Picking Campaign’ To Protect iPhone Owners From Thefts

Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

Re: Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

Re: Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

Re: Get image url from media:content in RSS XML feed

Statistics

Tags

Actions