Как правильно написать алгоритм для задачи сортировки массива по определённому значению и с доп. пополнением по запросу?

Добрый день.
Поступила задачка для написания некого функционала (на VueJS) получения и вывода данных в массиве с определённой сортировкой и с возможностью подгружать новые данные, которые моментально сортируются.

Есть некий массив, который приходит из БД примерно в таком стиле:
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'
                    },
                    // И так может быть много и получаем данные без сортировки
                ]


Потом, через v-for показываем эти данные с сортировкой - сначала category=1, потом category=2 и т.п. Пока из category=1 не покажем всё - category=2 не показываем.

Потом, при поступлении новых данных (планируется получать при скроллинге, как в ВК), добавляем в существующий массив и сортируем снова. И так можно до бесконечности.

С массивами и сортировкой в JS не работал, так что не знаю что да как. Буду благодарен, если направите в правильном направлении.
  • Вопрос задан
  • 123 просмотра
Решения вопроса 1
yarkov
@yarkov
Vue.js Frontend Developer
Алгоритмы, ага...
Вас спасет computed и простейшая сортировка по ключу:
// определим функцию сортировки
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
  }
}

Все, магия свершилась. Вместо posts пользуйтесь теперь sortedPosts для отображения.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы