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

Question

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>

It's a little difficult to get a sense of your messages' data structure, but couldn't you concatenate the arrays into one with something like: let conversation = [...incomingMessages, ...outgoingMessages]; and then sort that array by timestamp? — Marc
– Marc, Commented Nov 23, 2022 at 15:11
Yes this helped me, I tried @Andrea Roveroni answer and It fixed my problem. — Marek
– Marek, Commented Nov 23, 2022 at 18:40

Andrea Roveroni · Accepted Answer · 2022-11-23 15:57:00Z

1

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;
});

answered Nov 23, 2022 at 15:57

Andrea Roveroni

3003 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Marek Over a year ago

This is exactly what I was looking for. Thank you it is working now. I accepted answer.

Marek Over a year ago

I have one problem. When I console.log that new array, I see length 4, but when I open that array I see 8 objects. They are there but not correctly? How is this possible

Andrea Roveroni Over a year ago

It seems at some point you modify the array in some way. console.log is asyncronous so what you log on a specific line of your code might change before it's printed, but usually the problem is in a bad handling of that variable somewhere. Try debugging a bit more, or please provide the code that fails

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related