JavaScript: Assign a value to a string

Question

I have an array of strings, and I want to define each of these strings a value. A simple illustration would be

varString = "Hello";
eval(varString + " = 9");
console.log(Hello);

Where I am expecting to get back 9 for Hello. Which is obviously working. But I am wondering if there is a neater version of that!

Now, you might be wondering why I am doing so! The main reason is that I am trying to "setPlaybackRate" for several embedded youtube videos in my HTML.

var player;
function onYouTubeIframeAPIReady() {
  for (let index = 0; index < IDYT.length; index++) {
    element = IDYT[index];
    object1 = Objects1(youtubeVideo[index], YTtime[index]);
    player = new YT.Player(element, object1);
  }
}

where as you can see player is defined outside the function onYouTubeIframeAPIReady() each of Objects1 function and the IDYT are defined as follow

function Objects1(videoId1, startID1) {
  let object1 = {
    height: "315",
    width: "560",
    videoId: videoId1,
    playerVars: {
      autoplay: 0,
      loop: 1,
      start: startID1,
      // mute: 1,
    },
    events: {
      onStateChange: Test1,
    },
  };
  return object1;
}

and

let IDYT = ["player", "player1"];
let youtubeVideo = ["00vnln25HBg", "E-xMXv3L5L8"];
let YTtime = [20, 456];

But the problem is when the event is initiated i.e. the function onPlayerStateChange given by:

function onPlayerStateChange() {
  player.setPlaybackRate(1.5);
}

Only the last youtube video is having set playback rate of 1.5 which I did not expect. I think this is mainly that only the last player variable is defined. If I was able to do a loop of strings that are changed to variables that might help. I would really appreciate if you may give me guidance on how to solve this issue.

Many thanks in advance.

Helpful Links: https://developers.google.com/youtube/iframe_api_reference

score 1 · Accepted Answer · answered Dec 29 '21 at 13:13

Yes your intuition is correct that only the last player is being changed because others are overridden by the next player.

A very simplistic solution would be to have a players array maintained.

const players = [];
function onYouTubeIframeAPIReady() {
  for (let index = 0; index < IDYT.length; index++) {
    element = IDYT[index];
    object1 = Objects1(youtubeVideo[index], YTtime[index]);
    players.push(new YT.Player(element, object1));
  }
}

// .....
// ......

function onPlayerStateChange() {
  players.forEach((player) => player.setPlaybackRate(1.5));
}

JavaScript: Assign a value to a string

1 Answers1

Linked