Match an object to an array for sorting in vuejs

Question

I'm building an SPA chat app with roughly 3,000 rooms. The homepage will rank each room based on number of active participants.

For this I'm using Laravel, Vuejs, Laravel Echo and Socket.io.

I have built a simple version of my app here to understand my codebase: https://jsfiddle.net/benjifisher/3cotxu29/

Essentially I'm using the Laravel Echo Server HTTP API end point to retrieve the channel data. I list render the channel count for each room.

What I need advice on is how to sort the rooms based on the subscription count value. I understand I need to match the objects to the array and potentially push to a new array?

Below is a snippet

new Vue({
  el: "#app",

  data: {
    rooms: [
      { id: 1, name: "Room 1", url: 'room1'},
      { id: 2, name: "Room 2", url: 'room2' },
      { id: 3, name: "Room 3", url: 'room3' },
      { id: 4, name: "Room 4", url: 'room4' },
      { id: 5, name: "Room 5", url: 'room5'},
      { id: 6, name: "Room 6", url: 'room6' },
      { id: 7, name: "Room 7", url: 'room7' },
      { id: 8, name: "Room 8", url: 'room8' }
    ],
    channels: {
            channels: {
        presence_room4: {
            occupied: true,
          subscription_count: 2,
        },
        presence_room5: {
            occupied: true,
          subscription_count: 1,
        }
        }
    }

  },
  computed: { 

  },
  methods: {

  }
})

Thank you in advance.

Ben

Answer 1

Please check https://jsfiddle.net/Mark_f/vynqmtb2/ for the updated code.

What I've updated on your codes:

1. Calculate and sort room_channel_array of map between rooms and channels in watch method
2. Present the rooms with the sorted room_channel_array

You can use some 3rd party libraries like lodash to make your life easier.