dima9595
@dima9595
Начинающий разработчик PHP

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

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