asked on

Javascript Variable issues

I'm having issues filling a variable.
I'm using YouTube's API to create a playlist on my website.

I have a list of video codes and I want to loop through and get the video names (eventually more than that), and display them on a page.

For some reason, the videoDesc variable clears out after the for-loop finishes. I'm not getting any errors (at least not in FireFox's error consol), and if I put an alert inside the for-loop, it displays the information. Can you tell what I'm doing wrong?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script language="javascript">
	var videoDesc = "Desc: ";
	var myVids=['o322TIvmqtc','pnjTPSQXvtQ','gcMPhuhqVO4'];
	var numVids = myVids.length;
	for (i=0;i<numVids;i++){
		
		$.getJSON('http://gdata.youtube.com/feeds/api/videos/'+myVids[i]+'?v=2&alt=jsonc',function(data,status,xhr){
		
		videoDesc += data.data.title + '<br/>';
		
		});
	}
	alert(videoDesc);   //shows up blank
	$('#result').text(videoDesc); //Does nothing...
	
	
</script>

Open in new window

Thank you for your help!!!

Steve

Big Monty

the code looks alright syntactically, the first thing I would do is make sure you have the right URL and parameters set. take the url you have any plug it directly into the browser and see if you get a response.

also, should

data.data.title

be data.title

?

slightlyoff

ASKER

Thanks for the quick reply!

The youtube.com address is correct, I can put alerts inside the loop and display the titles of the videos. also, data.data.title is correct.

I think this is a scope issue, but I can't figure out why.
I set the variable videoDesc = "Desc: "; and the alert after the for-loop displays: "Desc:" even though it was changed in the loop.

For the purposes of testing, I just changed the variable in the loop to:
videoDesc = "Blue", but it still didn't change the result after the loop completed.

Thanks again for your help!

Steve

Big Monty

it seems like then there is something wrong here, as its not firing:

$.getJSON('http://gdata.youtube.com/feeds/api/videos/'+myVids[i]+'?v=2&alt=jsonc',function(data,status,xhr){
		
		videoDesc += data.data.title + '<br/>';
		
		});

Open in new window

if you put the alert statement in there, does it fire?

slightlyoff

ASKER

If I put in an alert there, it works as expected... but once the loop is done, videoDesc does not change (outside the loop).

Julian Hansen

Yes it will because your problem is that the $.getJSON is running asynchronously.

So what is happening is that the loop is running through all three calls before the first one has finished.
So the Desc is being updated but you are outputting it before the getJSON calls are finished.

Julian Hansen

Here is some code that should work using $.ajax and async: false

<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://code.jquery.com/jquery.js"></script>
<script language="javascript">
$(function() {
    var videoDesc = "Desc: ";
    var myVids=['o322TIvmqtc','pnjTPSQXvtQ','gcMPhuhqVO4'];
    var numVids = myVids.length;
    for (i=0;i<numVids;i++){
        $.ajax({
            url: 'http://gdata.youtube.com/feeds/api/videos/'+myVids[i] + '?v=2&alt=jsonc',
            dataType: 'JSON',
            async: false,
            type: 'GET',
            success: function(data) {
                videoDesc += data.data.title + '<br/>';
            }
        });
    }
    $('#result').html('videoDesc' + videoDesc);
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>

Open in new window

Julian Hansen

Also your code was running out side of a document ready block