How to correctly write an algorithm for the task of sorting an array by a certain value and with additional. replenishment on request?

Question

JavaScript

Good afternoon.
There was a task for writing some functionality (in VueJS) for receiving and outputting data in an array with a certain sorting and with the ability to load new data that is instantly sorted.
There is an array that comes from the database in something like this:

posts: [
                    {
                        title: 'Fusce ullamcorper tellus',
                        category: 1,
                        content: 'Fusce ullamcorper tellus sed maximus rutrum. Donec imperdiet ultrices maximus.',
                        imgUrl: 'https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/drop.jpg'
                    },{
                        title: 'Vestibulum condimentum quam',
                        category: 2,
                        content: 'At sagittis sapien vulputate. Vivamus laoreet lacus id magna rutrum dapibus.',
                        imgUrl: 'https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/plane.jpg'
                    },{
                        title: '[3] Vestibulum condimentum quam',
                        category: 3,
                        content: 'At sagittis sapien vulputate. Vivamus laoreet lacus id magna rutrum dapibus.',
                        imgUrl: 'https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/plane.jpg'
                    },{
                        title: 'Vestibulum condimentum quam',
                        category: 2,
                        content: 'At sagittis sapien vulputate. Vivamus laoreet lacus id magna rutrum dapibus.',
                        imgUrl: 'https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/plane.jpg'
                    },{
                        title: 'Vestibulum condimentum quam',
                        category: 1,
                        content: 'At sagittis sapien vulputate. Vivamus laoreet lacus id magna rutrum dapibus.',
                        imgUrl: 'https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/plane.jpg'
                    },
                    // И так может быть много и получаем данные без сортировки
                ]

Then, through v-for, we show this data with sorting - first category=1, then category=2, etc. Until we show everything from category=1, we don't show category=2.
Then, when new data arrives (it is planned to receive it when scrolling, as in VK), we add it to the existing array and sort it again. And so it is possible ad infinitum.
I didn’t work with arrays and sorting in JS, so I don’t know what and how. I would be grateful if you point me in the right direction.

Answer 1

Algorithms, yeah...
Computed and the simplest sorting by key will save you:

// определим функцию сортировки
function compare(a,b) {
  if (a.category < b.category)
    return -1
  if (a.category > b.category)
    return 1
  return 0
}
// дальше код компонента
posts: [
  {
    title: 'Fusce ullamcorper tellus',
    category: 1,
    content: 'Fusce ullamcorper tellus sed maximus rutrum. Donec imperdiet ultrices maximus.',
    imgUrl: 'https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/drop.jpg'
  },{
    title: 'Vestibulum condimentum quam',
    category: 2,
    content: 'At sagittis sapien vulputate. Vivamus laoreet lacus id magna rutrum dapibus.',
    imgUrl: 'https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/plane.jpg'
  },{
    title: '[3] Vestibulum condimentum quam',
    category: 3,
    content: 'At sagittis sapien vulputate. Vivamus laoreet lacus id magna rutrum dapibus.',
    imgUrl: 'https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/plane.jpg'
  },{
    title: 'Vestibulum condimentum quam',
    category: 2,
    content: 'At sagittis sapien vulputate. Vivamus laoreet lacus id magna rutrum dapibus.',
    imgUrl: 'https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/plane.jpg'
  },{
    title: 'Vestibulum condimentum quam',
    category: 1,
    content: 'At sagittis sapien vulputate. Vivamus laoreet lacus id magna rutrum dapibus.',
    imgUrl: 'https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/plane.jpg'
  },
  // И так может быть много и получаем данные без сортировки
]
// Много кода
computed: {
  sortedPosts () {
    this.posts.sort(compare)
    return this.posts
  }
}

All the magic happened. Instead of posts , now use sortedPosts for display.