How to assign buttons using for loop

Question

Can you help me?

I am still trying to understand how to assign listType to a button.

There are 8 buttons.

Each of these would be assigned to a specific button.

I am stuck on how to do this.

https://jsfiddle.net/82gv4nhm/

Doing this only assigns playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g" to a specific button.

This means i - 0 playlist is being assigned as the first button.

How would I then assign listType to a specific button?

  let playerVarsList = [{
      playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
    },
    {
      listType: "playlist",
      list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"
    },
    {}
  ];

  for (let i = 0; i <= 7; i++) {
    players.add(".playSingle" + i, {
      playerVars: playerVarsList[i - 0]
    });
  }

This i - 0 inside here: playerVars: playerVarsList[i - 0] tells the playlist what number button it is:

playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g

players.add(".playSingle" + i, {
playerVars: playerVarsList[i - 1]
});

For this one, what tells it what button number it should be?

listType: "playlist",
list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"
}

How the code works is, after clicking on a button a video appears.

  <button class="playSingle0 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle2 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle3 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle4 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle5 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle6 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle7 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>

I am having trouble understanding how to do it.

To do this more than one of these would be needed: i - 0

playerVars: playerVarsList[i - 0],

playerVars: playerVarsList[i - 3]

or

playerVars: playerVarsList[i - 0, i - 3] ?

Answer 1

Assigning values using an Array

Let's start with explaining the loop and how this uses an array of objects to assign player parameters to each button.

let playerVarsList = [{
    playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
  },
  {
    listType: "playlist",
    list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"
  },
  {}
]

for (let i = 0; i <= 7; i++) {
  players.add(".playSingle" + i, {
    playerVars: playerVarsList[i]
  })
}

This contains an array of objects called playerVarsList (this specific example only has 3 indexes, so for all 8 buttons you would need to add additional objects, which I'll cover later).

So the value for the playSingle0 button will be { playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g" }. And the value for playSingle1 will be { listType: "playlist", list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq" }. Lastly, the value for playSingle2 will be {}

So using this array of objects, if you want to set the value for the 7th button, you would need your playerVarsList to look something like this:

let playerVarsList = [
  { playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g" }, // This is the first button
  {
    listType: "playlist",
    list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"
  }, //  This is the second button
  {}, // This is the third button
  {}, // This is the fourth button
  {}, // This is the fifth button
  {}, // This is the sixth button
  {
    playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g",
    start: 300
  }, // This is the 7th button
  { start: 150, end: 1800 } // This is the eighth button
]

Also notice that I am not using [i - 0] as this isn't necessary. i or the current index of the loop will directly match a value in the playerVarsList so you don't need to preform any calculations on it.

Just as ".playSingle" + i will give you .playSingle0 for the first button, using playerVarsList[i] will translate to playerVarsList[0], which is the first object in the array of playerVarsList.

This means this loop will go through all values in the playerVarsList and will set the player parameters one at a time, using the index that coorelates with the current index in the loop (so index 0 uses the first object in the array, index 1 uses the second object, etc.)

Using the forEach() Loop

An alternative way to do this loop (that is often easier to work with) is the .forEach() method of looping.

When you use a standard for() loop, you need to declare a variable, set a condition, and the increment value. Then it loops through until the condition is false. A .forEach() loop lets you take an existing array and loop through all values, without needing to do things like declare an index or set a condition. Once all values have been looped through, it will end.

This means you would change your code to look something like this:

let playerVarsList = [
  { playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g" }, // This is the first button
  {
    listType: "playlist",
    list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"
  }, //  This is the second button
  {}, // This is the third button
  {}, // This is the fourth button
  {}, // This is the fifth button
  {}, // This is the sixth button
  {
    playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g",
    start: 300
  }, // This is the 7th button
  { start: 150, end: 1800 } // This is the eighth button
]

playerVarsList.forEach((pvl, i) => {
  players.add(`.playSingle${i}`, {
    playerVars: pvl
  })
}

In this, we are using 2 parameters in the .forEach() loop, pvl and i. The pvl value will be whatever the current value of our playerVarsList is. So for the first loop, pvl is the same as playerVarsList[0] in our old loop. The second parameter i is the same as a standard loop being that it is the index. We use this so we can get the correct button.

Another change you may notice is .playSingle${i} instead of ".playSingle" + i. This is called a template literal in which you can wrap a string in backticks (the little character to the left of the 1 key on most keyboads). Then you no longer need to concatenate strings with variables by using the + operator. You can simply wrap any variable in ${} instead and everything will be concatenated automatically.