How to display data ordered by date from two arrays in Vue.js-CodePudding

I have created app for customer. Requirement was to have something like LiveChat. I managed to achieve this, now when I receive message I display it on web and when I reply it is also displayed on web. Problem is that currently I have received messages and after all received messages I have sended messages. I need to change this to work like in other messaging apps. That means that messages will be ordered by date not depending on if it is sended or received.

I tried to create new array and push both received and sended messages to it, but this is not working for me. This is how my data looks now:
Conversation[] (main array):
|_ received[] (array of objects) -> specific_messages{} (objects containing data)
|_ sended[] (array of objects) -> specific_messages{} (objects containing data)

I want to loop trought array and if specific_message object contain "direction = incoming", then I will call Incoming Message Component, else I will call Outgoing Message Component.

Is this even possible? Because I think I tried everything and nothing was working for me.

Thank you.

Current console log of conversation array.

Code for incoming messages:

getSmsContent(){
  var mapURL;
  var smsContent = [];
  for (let i = 0; i < this.getSMS.length; i  ) {
    if (this.getSMS[i].sender == this.get_sms_sender) {
      mapURL = this.getSMS[i].url_gps;
      if (this.getSMS[i].message.length == 1) {
        smsContent.push(this.getSMS[i].message);
      }
      else {
        for (let j = 0; j < this.getSMS[i].message.length; j  ) {
          smsContent.push(this.getSMS[i].message[j]);
        }
      }
    }
  }
  this.mapURL = mapURL;
  this.smsContent = smsContent;
  this.conversation.push(smsContent);
},

Code for outgoing messages:

loadLastSMS(){
  const lastSMS = [];
  SMSService.getLastSMS()
    //TODO
    //this needs to be ordered by date
    .then((response) => {
      const data = response.data.result;
      let objectID = [];
      for (let key in data) {
        objectID.push(key);
      }
      var last_sms = [];
      for (let i = 0; i < objectID.length; i  ) {
        last_sms.push(response.data.result[objectID[i]]);
      }

      for (let j = 0; j < last_sms.length; j  ) {
        lastSMS.push({
          date_time: last_sms[j].date_time,
          message: last_sms[j].message,
          recipient: last_sms[j].recipient,
          sender: last_sms[j].sender,
          stat: last_sms[j].stat,
          status_id: last_sms[j].status_id,
          type: last_sms[j].type,
          url_gps: last_sms[j].url_gps,
        });
      }

      this.lastSMS = lastSMS;
      this.conversation.push(lastSMS);
    });
}

And here is my Vue.js code:

<div v-for="content in conversation" :key="content.id">
  <section v-if="content.direction == 'incoming'">
    <IncomingChatCard :content="content" :mapURL="mapURL" />
  </section>
  <section v-else>
    <OutgoingChatCard :item="sms" />
  </section>
</div>

CodePudding user response：

You could spread both arrays into a new one and then sort it:

const sentMessages = [];
const receivedMessages = [];


const sortedMessages = [...sentMessages, ...receivedMessages].sort((m1, m2) => {
    // Your sorting rule, for example:
    return new Date(m1.date_time) < new Date(m2.date_time) ? -1 : 1;
});