Trouble understanding and creating dynamic JavaScript objects

Question

I hope my code can explain itself, I am almost there, I just am stuck on the way how to merge optional data into a JSON object with multiple levels (is that even what it is?)

//get video list - example: video1.flv;test23.flv;Grabledable.flv
var files = j('.videos').html().split(';');
// assume first we have one video, so no need of playlist
var isplaylist = false;
// check if there are actually more than one video
if (files.length > 1) {
    isplaylist = true;
    var playlist = new Array(); // is this right? I want to add this to the video var
    for (var i in files) {
        playlist[] = {
            url: files[i],
            title: 'Video ' + i
        };
    }
};

//here's where the trouble starts
var video = {
    plugins: {
        controls: {
            playlist: isplaylist,
            //i cut out all irrelevant extra data
        }
    }, 
    clip: {

        url: files[0],
        // ONLY DO THIS IF isplayer == false;
        wmode: 'opaque',
        baseUrl: "/video/",
        autoPlay: false
    },

    // from here on this should only occur if isplayer == true;
    // following is the way I want it attached from var playlist
    playlist: [{
        url: 'video1.flv',
        title: 'Video 0'
    },
    {
        url: 'test23.flv',
        title: 'Video 1'
    },
    {
        url: 'Grabledable.flv',
        title: 'Video 2'
    }]
};

My target is the format listed here: http://flowplayer.org/plugins/javascript/playlist.html under the section JavaScript coding.

If you really want to create JSON, you have to enclose the keys in double quotes `"`. — Felix Kling, Oct 10 '10 at 07:08
@Felix Kling: I am following the format that is predefined here http://flowplayer.org/plugins/javascript/playlist.html under the section JavaScript coding — Moak, Oct 10 '10 at 07:18
Ok, then you are not creating JSON but just a normal JavaScript Object. — Felix Kling, Oct 10 '10 at 07:25
@Felix Kling: thanks for clearing that up, I'm new to this :) — Moak, Oct 10 '10 at 07:48

Felix Kling · Accepted Answer · 2010-10-10T07:35:51.470

1

If I am not mistaken, you want something like this:

var video = {
  plugins: {
    controls: {
      playlist: false
    }
  },
  clip:  {
      wmode: 'opaque',
      baseUrl: "/video/",
      autoPlay: false
  }
}

// check if there are actually more than one video
if(files.length > 1){
  video.plugins.controls.playlist = true;
  var playlist = [];
  for ( var i = 0, l = files.length; i < l; i++ )
  {
     playlist.push({url: files[i], title: 'Video '+ i});
  }
  video.playlist = playlist;
}
else {
  video.clip.url = files[0];
}

The corresponding entries (like video.playlist or video.clip.url) are added dynamically. Never traverse arrays with the for ( ... in ...) construct!

edited Oct 10 '10 at 07:35

answered Oct 10 '10 at 07:30

Felix Kling

795,719
175
1,089
1,143

looks like there might be a small typo in this: the playlist array in the for loop is not being indexed into. – jbeard4 Oct 10 '10 at 07:45
Great, this actually helped me beyond this specific question. – Moak Oct 10 '10 at 07:45
Also, for..in is not the best way to iterate over indexes in an array: See mdc here for more info: https://developer.mozilla.org/en/JavaScript/Reference/Statements/for...in#section_4 It looks like he's using jquery to get the video DOM elements, so he should probably use jquery's .each() method instead: http://api.jquery.com/each/ – jbeard4 Oct 10 '10 at 07:51
@echo-flow: I must have edited my question while you wrote the comments... for such a simple task, I would not use `.each()`, as this implies a function call per element. – Felix Kling Oct 10 '10 at 09:02

score 1 · Answer 2 · edited May 23 '17 at 11:47

don't use for-in for arrays
use push method to add new elements to an array (the format you used only exists in PHP)

Code:

// assuming you have video declared before
var video = { ... };

//get video list - example: video1.flv;test23.flv;Grabledable.flv
var files = j('.videos').html().split(';');
// assume first we have one video, so no need of playlist
var isplaylist = false;
// check if there are actually more than one video
if ( files.length > 1 ) {
    isplaylist = true;
    var playlist = new Array();
    for ( var i = 0; i < files.length; i++ ) {
        playlist.push ({
            url: files[i],
            title: 'Video ' + i
        });
    }
};

video.playlist = playlist;

Trouble understanding and creating dynamic JavaScript objects

2 Answers2