Having trouble accessing an element of an array that is one index less or greater than current index in a for loop(even though it exists)

Question

My object idAry is an array of elements that has an property called msisdn_id . There are 4 objects in the array and when I loop through them and the Id is set to be the same as the second ID in the loop, it correctly finds it and falls to the else clause. However, when I try accessing the ids of the elements who is in position +1 or -1 in the array, I get an error of [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'msisdn_id' of undefined" I have no clue why it's not defined. I'm literally looped through the "left" one.

I have the code like this:

  for (let [index, val] of idAry.entries()) {
    console.log("index is:" + index);
    console.log("val[index].msisdn_id:" + val[index].msisdn_id);
    if(id == val[index].msisdn_id){
      console.log("id found:" + val[index].msisdn_id);
      if( index == 0 ){
        //no left button
        console.log("index == 0: " + val[index + 1].msisdn_id);
        this.rightId = val[index + 1].msisdn_id;
      }
      else if (index == (val.length - 1)) {
        //no right button
        console.log("else if: " + val[index - 1].msisdn_id);
        this.leftId = val[index - 1].msisdn_id;
      } 
      else {
        console.log("both LR: " + val[index - 1].msisdn_id + "," + val[index + 1].msisdn_id);
        this.leftId = val[index - 1].msisdn_id;
        this.rightId = val[index + 1].msisdn_id;
      }
      break;
    }
  }

output looks like:

length of ary is:4
TerminalProfileReport.vue?3387:400 index is:0
TerminalProfileReport.vue?3387:401 val[index].msisdn_id:111
TerminalProfileReport.vue?3387:400 index is:1
TerminalProfileReport.vue?3387:401 val[index].msisdn_id:222
TerminalProfileReport.vue?3387:403 id found:222

edit - updated the output. it should show val[index] and updated code looks like this

    for (let [index, val] of idAry.entries()) {
    console.log("index is:" + index);
    console.log("idAry[index].msisdn_id:" + val.msisdn_id);
    if(id == val.msisdn_id){
      console.log("id found:" + val.msisdn_id);
      if( index == 0 ){
        //no left button
        console.log("index == 0: " + idAry[index + 1].msisdn_id);
        this.rightId = idAry[index + 1].msisdn_id;
      }
      else if (index == (idAry.length - 1)) {
        //no right button
        console.log("else if: " + idAry[index - 1].msisdn_id);
        this.leftId = idAry[index - 1].msisdn_id;
      } 
      else {
        console.log("both LR: " + idAry[index - 1].msisdn_id + "," + idAry[index + 1].msisdn_id);
        this.leftId = idAry[index - 1].msisdn_id;
        this.rightId = idAry[index + 1].msisdn_id;
      }
      break;
    }
  }

Answer 1

I'm not sure if the code you posted is the same as the one you used since one of the logs you mentioned starts with: idAry[index].msisdn_id : while it's in the question val[index].msisdn_id: . Anyway based in the code mentioned in the question the issue seems to be in how you use the variable val as it's the array itself. In each iteration val represents the value of one of the entries in the array idAry . Here your code updated:

for (let [index, val] of idAry.entries()) {
    console.log("index is:" + index);
    console.log("idAry[index].msisdn_id:" + val.msisdn_id);
    if(id == val.msisdn_id){
      console.log("id found:" + val.msisdn_id);
      if( index == 0 ){
        //no left button
        console.log("index == 0: " + idAry[index + 1].msisdn_id);
        this.rightId = idAry[index + 1].msisdn_id;
      }
      else if (index == (idAry.length - 1)) {
        //no right button
        console.log("else if: " + idAry[index - 1].msisdn_id);
        this.leftId = idAry[index - 1].msisdn_id;
      } 
      else {
        console.log("both LR: " + idAry[index - 1].msisdn_id + "," + idAry[index + 1].msisdn_id);
        this.leftId = val[index - 1].msisdn_id;
        this.rightId = val[index + 1].msisdn_id;
      }
      break;
    }
  }

Answer 2

you confuse val with idAry , val[index].msisdn_id does not exist use val.msisdn_id

for (let [index, val] of idAry.entries())
  {
  console.log("index is:" + index);
  console.log("val.msisdn_id:" + val.msisdn_id);


  if( id == val.msisdn_id)
    {
    console.log("id found:" + val.msisdn_id);
    if( index == 0 )
      {
      //no left button
      console.log("index == 0: " + idAry[index + 1].msisdn_id);
      this.rightId = idAry[index + 1].msisdn_id;
      }
    else if (index == (idAry.length - 1)) 
      {
      //no right button
      console.log("else if: " + idAry[index - 1].msisdn_id);
      this.leftId = idAry[index - 1].msisdn_id;
      } 
    else
      {
      console.log("both LR: " + val[index - 1].msisdn_id + "," + val[index + 1].msisdn_id);
      this.leftId = idAry[index - 1].msisdn_id;
      this.rightId = idAry[index + 1].msisdn_id;
      }
    break;
    }
  }

but there is much simplier to do
see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

let index = idAry.findIndex(e=>e.msisdn_id===id)

if (index!=-1)  // if exist
  {
  console.log('id found , index is', index, idAry[index].msisdn_id);

  if ( index > 0 )
    { this.leftId  = idAry[index - 1].msisdn_id;}

  if (index < (idAry.length - 1))
    { this.rightId = idAry[index + 1].msisdn_id; }
  }
else
  {
  console.log('id not found (', id , ')' );
  }