CODEWITHSUNDEEP
javascriptgoogle-apiblogger
John Behan
John Behan

Reputation: 584

Extracting the source of an image from an Atom feed using Javascript

I'm working on a gadget for a Blogger site. I want to get the title, link and first image from the first four posts with a specific tag in the site's feed(Atom) using Javascript. So far I have the title and link coming in from these posts an being displayed with HTML in the gadget. Here is the code:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Retrieve Featured Blog Posts" height="150" author="John Behan" />
<Content type="html">
    <![CDATA[
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("feeds", "1");              
        </script>
        <script type="text/javascript">
            function initialize() {

                var feed = new google.feeds.Feed("http://test-ohomind.blogspot.com/feeds/posts/default/-/featured");
                feed.load(function(result) {
                    if (!result.error) {
                        var container = document.getElementById("feed");
                        for (var i = 0; i < result.feed.entries.length; i++) {
                            var entry = result.feed.entries[i];

                            var myElement = document.createElement('div');
                            var content = entry.content;
                            myElement.innerHtml = content;

                            var imagesrc = myElement.getElementsByTagName("img")[0].src;

                            var mydiv = document.getElementById("mydiv");
                            var newcontent = document.createElement('p');

                            newcontent.innerHTML = '<a href="' + entry.link + '">' + entry.title + '</a><br />' + imagesrc;

                            while (newcontent.firstChild) {
                                mydiv.appendChild(newcontent.firstChild);
                            }
                        }
                    }

                });
            }
            window.onload = initialize();
        </script>
            <body>

                <div id="mydiv">

                </div>
            </body>
    ]]>
</Content>
</Module>

The above code gives a blank gadget and Firebug reports that

myElement.getElementsByTagName("img")[0] is undefined

I've tried changing it around a bit:

var imagesrc = myElement.getElementsByTagName("img");

gives this in the gadget

[object NodeList]

Can someone show me what I'm doing wrong please? I just need to get the source(src) of the first image. The rest of the gadget I can do but this little piece of the problem has me totally frustrated at this stage.

Thanks in advance.

Upvotes: 0

Views: 580

Answers (1)

brettcvz
brettcvz

Reputation: 2381

one potential issue I've noticed in your code is that your window.onload is actually running the initialize() script function, rather than setting window.onload = initialize or window.onload = function(){initialize()}; as I believe you are intending.

Given that your code is running before onload, it would explain why getElementsByTagName isn't pulling anything

Edit: I would also recommend looking at Best practice for using window.onload for best practices

Upvotes: 2

Related Questions