js how to check two objects values in an array are together

Question

If I have the array:

let messages = [
  {
    username: 'john',
    message: 'hi'
  },
  {
    username: 'john',
    message: 'there'
  },
  {
    username: 'bob',
    message: 'hello'
  },
  {
    username: 'john',
    message: 'whats up'
  }
]

If i have messages like:

In vuejs rendered out how would I combine messages with the same username and render the text under each other?

I have a Message component that takes in a message prop and uses v-for from a messages array to render it. — svoruganti, Oct 20 '20 at 18:16
What I'm trying to achieve is like in discord where the messages from the same user doesn't get rendered with the username but gets added to each other. — svoruganti, Oct 20 '20 at 18:18
So loop over the array, if the previous item is the same, push the content into that one. OR you change your looping to determine if the previous heading is the same, do not show it. — epascarello, Oct 20 '20 at 18:21

score -1 · Accepted Answer · answered Oct 20 '20 at 21:25

Don't to it in the view, use a computed to get the data you want. You can then use <template> tags to control which elements are shown, that way you don't need to wrap the elements into a single DOM element.

Below is an example that shows a straight forward way of generating an array for the computed that can then be iterated over.

Vue.createApp({
  data() {
    return {
      messages: [{
          username: 'john',
          message: 'hi'
        },
        {
          username: 'john',
          message: 'there'
        },
        {
          username: 'bob',
          message: 'hello'
        },
        {
          username: 'john',
          message: 'whats up'
        }
      ]
    }
  },
  computed: {
    byUser() {
      const arr = [];
      let tempName = null;
      let tempGroup = {}
      this.messages.forEach(m => {
        if (tempName !== m.username) {
          tempGroup = {
            username: m.username,
            messages: []
          }
          arr.push(tempGroup);
        }
        tempGroup.messages.push(m.message);
        tempName = m.username;
      })
      return arr;
    }
  }

}).mount("#app")

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>

<div id="app" class="container">
  <template v-for="(m, i) in byUser">
    <h2>
      {{ m.username }}
    </h2>
    
    <p v-for="message in m.messages">
      {{ message }}
    </p>
    
    <hr>
  </template>
</div>

js how to check two objects values in an array are together

1 Answers1