Brightcove Video Manager API, Get Playlist by ID java script

Question

I am pretty new to the whole idea of java script and am really stuck trying to find a solution to my problems. I have fallowed the template that brightcove uses for the video manager which uses a "get all playlist URL" call. I am trying to just make a menu of just a few specific playlist and am getting error after error when doing so, no matter what I change. As of right now my my main error is "Uncaught TypeError: Cannot read property 'length' of undefined".Any help would be so greatly appreciated. Thank you.

//Get PlayList by ID

function getPlaylistLindyURL(){

loadStart();
paging.playlistbyid = (paging.currentFunction == getPlaylistLindyURL)?paging.generic:paging.playlistbyid;
paging.currentFunction = getPlaylistLindyURL;
return apiLocation +
'?command=find_playlist_by_id&playlist_id=1990786315001&callback=showPlaylistByIDCallBack'
    + '&get_item_count=true&page_size=' + paging.size + '&page_number='+paging.playlistbyid
    +'&token='+readToken;         



//Playlist by ID callback

function showPlaylistByIDCallBack(o){

if(null == o.error){
    oCurrentMainVideoList = o.items;
    buildMAinVideoList();
    doPageList(o.total_count, "Videos");
}else{
    var message = (null!=o.error.message)?o.error.message:o.error;
    alert("Server Error: "+ message);
}
loadEnd();
}


//For PlayList by ID

function buildMAinVideoList() {

//Wipe out the old results
$("#tbData").empty();

// Display video count
document.getElementById('divVideoCount').innerHTML = oCurrentMainVideoList.length + "Video";
document.getElementById('nameCol').innerHTML = "Video Name";
document.getElementById('headTitle').innerHTML = "All Videos";
document.getElementById('search').value = "Search Videos";
document.getElementById('tdMeta').style.display = "none";
document.getElementById('searchDiv').style.display = "none";
document.getElementById('checkToggle').style.display = "none";
$("span[name=buttonRow]").hide();
$(":button[name=delFromPlstButton]").hide();


//For each retrieved video, add a row to the table
var modDate = new Date();
$.each(oCurrentMainVideoList, function(i,n){
    modDate.setTime(n.lastModifiedDate);
    $("#tbData").append(
        "<tr style=\"cursor:pointer;\" id=\""+(i)+"\"> \
        <td>\
            <input type=\"checkbox\" value=\""+(i)+"\" id=\""+(i)+"\" onclick=\"checkCheck()\">\
        </td><td>"
            +n.name +
        "</td><td>"
            +(modDate.getMonth()+1)+"/"+modDate.getDate()+"/"+modDate.getFullYear()+"\
        </td><td>"
            +n.id+
        "</td><td>"
            +((n.referenceId)?n.referenceId:'')+
        "</td></tr>"
    ).children("tr").bind('click', function(){
        showMetaData(this.id);
    })
});

Answer 1

From the code you posted it looks like oCurrentMainVideoList is not declared any where, so that might be why its saying its undefined...

If you have it defined as a global variable which it must be from the look of it, make sure you have sett a value to it. But you should not use a global variable, create a namespace for your functions, it helps with scope control.

If you want to learn some JS best practices you should watch this video from TekPub: JS_UpToSpeed

You should also take your time to look over your code and make it more readable before you post, the lack of indentations is making the code hard to read and theres multiple capital letters in buildMAinVideoList.