Using eval() - Uncaught SyntaxError: Unexpected identifier at pageLoad

Question

first time using stackoverflow. :)

I am a beginner in JS trying to add values to a list of variables that may change based on the number of passengers variable. (ie. if numRiders = 4 I need to assign values to passenger1Name, passenger2Name, passenger3Name, passenger4Name)

I am trying to use eval inside a loop to do it:

for(i = 0; i<=numRiders; i++) {
    j = i+1
    var l ='var '
    var k = 'passenger'
    let nameJ = ride[i].passengerDetails.first + ' ' + ride[i].passengerDetails.last;
    console.log (nameJ)
    eval(l+k+j+ 'Name' + '= ' + nameJ + ';')
    console.log(passenger1Name)

I am getting this output right after the nameJ console.log

VM321:1 Uncaught SyntaxError: Unexpected identifier at pageLoad

Anyone know how can I solve this or approach this differently? Unfortunately, I can't change the variables names (e.g. passengerXName) to one that would make it easier to assign dynamic variables.

Thank you

Answer 1

I have since 1996 or so RARELY seen any reason for eval

This is recommended

const rides = [
{ passengerDetails: {first:"Fred",last:"Flinstone"}},
{ passengerDetails: {first:"Wilma",last:"Flinstone"}}
]

const names = rides.map(ride => `${ride.passengerDetails.first} ${ride.passengerDetails.last}`)
console.log(names)

or even

const rides = [
{ passengerDetails: {first:"Fred",last:"Flinstone"}},
{ passengerDetails: {first:"Wilma",last:"Flinstone"}}
]

const names = rides.reduce((acc,ride,i) => {
  acc[`passenger${i+1}name`] = `${ride.passengerDetails.first} ${ride.passengerDetails.last}`
  return acc;
  },{})
console.log(names)

If you MUST, try this assuming you have a window scope to add it to

const rides = [
{ passengerDetails: {first:"Fred",last:"Flinstone"}},
{ passengerDetails: {first:"Wilma",last:"Flinstone"}}
]

rides.forEach((ride,i) => {
    let nameJ = `${ride.passengerDetails.first} ${ride.passengerDetails.last}`;
    window[`passenger${i+1}Name`]=nameJ;
})
console.log(passenger1Name)