"iterator.call is not a function"

[Ian R]

Ok. So I have a structure like this:

<div class="fp_YouTube">

<div class="player">
<object width="425" height="349"> ... </object>
</div>

<ol class="playlist">
<li id="YouTubeID_w7naKj-z5So"> ... </li>
<li id="YouTubeID_naiN5V4Q1rI"> ... </li>
</ol>

</div>

And eventually what I am doing is replacing the contents of "player"
with a new video, based on observing a click on one of the list items
in "playlist". I've done it before but I'm trying to prototypejs it
up a little nicer.

SO... I have this JS code going:

$$('div.fp_YouTube').each(function(el) {
var player = el.select('.player');
var playlist = el.select('.playlist');
playlist.select('li').each(function(video) {
console.log(video.id);
});
});


But firebug is telling me this:

"iterator.call is not a function -- prototype.js (line 661)"

I've noticed that if I console.log the original "el" variable, it
looks like <div class="fp_YouTube"> but if I log the "playlist"
variable, it comes out as [ol.playlist] ... is it returning a 1-item
array? Is there something I am fundamentally misunderstanding,
something I need to do in order to work with "playlist" the way I've
been working with "el"?

Thanks in advance, and pardon this message for misfiring and sending
before I was ready.

Ian

[Alex McAuley]

Is it returning an array ?

Check with

$$('div.fp_YouTube').each(function(el) {
var player = el.select('.player');
var playlist = el.select('.playlist');

alert(playlist); // see if its an object
return;

playlist.select('li').each(function(video) {
console.log(video.id);
});
});

if it is returning an array then try

$$('div.fp_YouTube').each(function(el) {
var player = el.select('.player');
var playlist = el.select('.playlist');

$(playlist).select('li').each(function(video) {
console.log(video.id);
});
});

HTH

Alex

[Ian R]

I did check on the array situation -- it's so good and bad that
finally turning to this forum and *writing it all down* usually solves
the problem!

In the above case, $(playlist).select('li').each didn't work, but
playlist[0].select('li').each does.

I'm not sure that I exactly LOVE how that works, but it's not
terrible. If there's a better way, I'd love to know about it.

Thanks!
Ian

[Rick Waldron]

The reason you need to use an index on playlist is because select returns an array, so... instead of using the index[0] the way you've done, you can send it back to the el.select():


$$('div.fp_YouTube').each(function(el)  {
       var player   = el.select('.player')[0]; // <--- right here!
       var playlist = el.select('.playlist li'); // also... select your li's here, this will save you another select() call on the next line!
       playlist.each(function(video)      { // <-- neater.
               console.log(video.id);
       });
});


Have a look:

http://jsbin.com/avedu


Rick