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

Question

[Дмитрий Кузнецов]

Добрый день.
Поступила задачка для написания некого функционала (на 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 не работал, так что не знаю что да как. Буду благодарен, если направите в правильном направлении.

Answer 1

[Алексей Ярков]

Алгоритмы, ага...
Вас спасет 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 для отображения.

Comments

[Дмитрий Кузнецов]

Написал как вы говорили, но сортировка не изменилась(:
Код:

<template>
    <v-flex xs12 md4 offset-md4>
        <div v-for="post in sortedPosts">
            <v-card class="my-3" hover>
                <v-card-media class="white--text" height="170px" :src="post.imgUrl">
                    <v-container fill-height fluid>
                        <v-layout>
                            <v-flex xs12 align-end d-flex>
                                <span class="headline">{{ post.title }}</span>
                            </v-flex>
                        </v-layout>
                    </v-container>
                </v-card-media>

                <v-card-text>
                    <v-chip color="primary" text-color="white">{{ post.category }}</v-chip>
                </v-card-text>

                <v-card-actions>
                    <v-btn icon class="blue--text">
                        <v-icon medium>fa fa-vk</v-icon>
                    </v-btn>

                    <v-btn icon class="red--text">
                        <v-icon medium>fa fa-instagram</v-icon>
                    </v-btn>

                    <v-btn icon class="light-blue--text">
                        <v-icon medium>fa-twitter</v-icon>
                    </v-btn>

                    <v-btn icon class="blue--text text--darken-4">
                        <v-icon medium>fa-facebook</v-icon>
                    </v-btn>

                    <v-spacer></v-spacer>
                    <!--<v-btn flat class="blue&#45;&#45;text">Read More</v-btn>-->
                </v-card-actions>
            </v-card>
        </div>
    </v-flex>
</template>

<script>
    export default{
        data() {
            return {
                posts: [
                    {
                        title: '[1] Fusce ullamcorper tellus',
                        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/drop.jpg'
                    },
                    {
                        title: '[2] Donec vitae suscipit lectus, a luctus diam.',
                        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/docks.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: '[2] 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: '[1] 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(this.sortPosts)

                return this.posts
            }
        },

        filters: {
            sortPosts: function(a, b) {
                if (a.category < b.category)
                    return -1
                if (a.category > b.category)
                    return 1
                return 0
            }
        }
    }
</script>

[Алексей Ярков]

Дмитрий Кузнецов, а зачем sortPosts в фильтры засовывать? Я вроде не так написал.

[Дмитрий Кузнецов]

Алексей Ярков, Я просто название фильтра изменил для лёгкого понимания (для меня). В цикле и в фильтрах названия разные.

[amokrushin]

Дмитрий Кузнецов, this.sortPosts у вас undefined, поэтому и не работает. Переименуйте filters в methods.

[Дмитрий Кузнецов]

amokrushin, да, проблема была в этом. Спасибо!)