Get a property of an object, nested in a property of an object inside an array

Question

I want to get last "message" of every object but i dont know how to do.. i have this data:

{
  data: {
    contacts: [
      {
        name: 'Michele',
        avatar: '_1',
        visible: true,
        messages: [
          {
            date: '10/01/2020 15:30:55',
            message: 'Hai portato a spasso il cane?',
            status: 'sent'
          },
          {
            date: '10/01/2020 15:50:00',
            message: 'Ricordati di stendere i panni',
            status: 'sent'
          },
          {
            date: '10/01/2020 16:15:22',
            message: 'Tutto fatto!',
            status: 'received'
          }
        ],
      },
      {
        name: 'Fabio',
        avatar: '_2',
        visible: true,
        messages: [
          {
            date: '20/03/2020 16:30:00',
            message: 'Ciao come stai?',
            status: 'sent'
          },
          {
            date: '20/03/2020 16:30:55',
            message: 'Bene grazie! Stasera ci vediamo?',
            status: 'received'
          },
          {
            date: '20/03/2020 16:35:00',
            message: 'Mi piacerebbe ma devo andare a fare la spesa.',
            status: 'sent'
          }
        ],
      }
    ]
  }
}

i want to take last message of every messages.. like 'Tutto fatto!'

I have this

<div v-for="(item, index) in contacts" class="col-12 d-flex justify-content-between align-items-center py-3 px-3">
    <div class="d-flex"> <img class="profile-pic me-3" :src="'img/avatar' + item.avatar + '.jpg'" alt="userpic">
        <div>
            <div class="fw-bold">{{item.name}}</div>
            <p class="text-secondary"> Last message sent</p>
        </div>
    </div>
    <div class="text-secondary mb-5">12:00</div>
</div>

Answer 1

You can use ES2022 Array.at(-1) method to get the last element from an array.

Working Demo :

const obj = {
  data: {
    contacts: [
      {
        name: 'Michele',
        avatar: '_1',
        visible: true,
        messages: [
          {
            date: '10/01/2020 15:30:55',
            message: 'Hai portato a spasso il cane?',
            status: 'sent'
          },
          {
            date: '10/01/2020 15:50:00',
            message: 'Ricordati di stendere i panni',
            status: 'sent'
          },
          {
            date: '10/01/2020 16:15:22',
            message: 'Tutto fatto!',
            status: 'received'
          }
        ],
      },
      {
        name: 'Fabio',
        avatar: '_2',
        visible: true,
        messages: [
          {
            date: '20/03/2020 16:30:00',
            message: 'Ciao come stai?',
            status: 'sent'
          },
          {
            date: '20/03/2020 16:30:55',
            message: 'Bene grazie! Stasera ci vediamo?',
            status: 'received'
          },
          {
            date: '20/03/2020 16:35:00',
            message: 'Mi piacerebbe ma devo andare a fare la spesa.',
            status: 'sent'
          }
        ],
      }
    ]
  }
};

const res = obj.data.contacts.map((obj) => obj.messages.at(-1).message);

console.log(res);

Answer 2

This should probably give you an access:

data.contacts.forEach(user => {
   user.messages[user.messages.length-1].message
   // in first iteration you recive Tutto fatto! and in second Mi piacerebbe ma devo    
   // andare a fare la spesa
}