数组给我“无法读取未定义的属性”，但console.logs显示其他信息

Question

I'm trying to do a method in which i process an array of messages, every message haves an id of the user sending the message and the content of the meesage itself.

Once i get the array, i try to separate the messages by the user who send it (In order to style the messages according to the users later on).

I attempt to do this with a for loop to read the array, and an if to check if the logged user send such message or not.

The problem pops up when i want to read who send the message.

At first i thought "i may be writing the sentence wrong", so i used some consol.logs to see what was wrong. And i got an interesting situation going on: The variable shows correctly on the console, but i get an error once i want to evaluate on the if .

Here's the JavaScript code i'm running

function processMeesages(allMessages) {

  for (var i = 0; i <= allMessages.length; i++) {

    console.log('allMessages[' + i + '].userMsg', allMessages[i].userMsg)

    //Message from the logged user
    if (allMessages[i].userMsg == user.id) {
      chatMessages += '<div class="row ">' +
              '            <div class="col col-10 "></div>' +
              '            <div class="col card owner-container">' +
              '                <div class="item item-text-wrap owner">' +
                                  allMessages[i].contenido +
              '                </div>' +
              '            </div>' +
              '        </div>';
    }

    //Messages from the other user
    else {
      chatMessages += '<div class="row ">' +
              '            <div class="col card message-container">' +
              '                <div class="item item-text-wrap message">' +
                                  allMessages[i].contenido +
              '                </div>' +
              '            </div>' +
              '            <div class="col col-10 "></div>' +
              '        </div>';
    }
  }

  //Once the for loop ends (What's down didn't show up on the console)
  $rootScope.chatMessages = chatMessages;
  console.log('chatMessages', chatMessages)
  console.log('rootscopeChatMessages', $rootScope.chatMessages)
}

Here's an image with what i get in the console and what the array haves inside (I put some labels on the picture)

Answer 1

Seems like you are looping more than required. Your array only has two elements but your for loop tries to loop over 3 times, hence giving that access error because allMessages[2] is undefined.

function processMeesages(allMessages) {

  for (var i = 0; i < allMessages.length; i++) {

    console.log('allMessages[' + i + '].userMsg', allMessages[i].userMsg)

    .
    .
    .
    .
}