How to write an algorithm for the problem of sorting the array for a certain value and with further replenishment on request?

Good afternoon.
Received the task to write certain functions (on VueJS) receive and output data in the array with some sorting and with the option to load new data that are instantly sorted.

There is a certain array, which comes from the database about this style:
posts: [
{
 title: 'Fusce ullamcorper tellus',
 category: 1,
 content: 'Fusce ullamcorper tellus sed rutrum maximus. 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 rutrum magna id 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 rutrum magna id 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 rutrum magna id 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 rutrum magna id dapibus.',
 imgUrl: 'https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/plane.jpg'
},
 // And can be so much and receive data without sorting
 ]


Then, using v for showing this data with sort - first category=1, then category=2, etc. Until category=1 does not show all the category=2 is not shown.

Then, when new data is received (planned to when scrolling, as in VK) that is added to an existing array and sorted again. And so is endless.

With arrays and sorting in JS didn't work, so I don't know what to do. I would be grateful if you will direct in the right direction.
June 8th 19 at 17:11
1 answer
June 8th 19 at 17:13
Solution
Algorithms yeah...
You will save computed and the simplest sort key:
// define sort function
function compare(a,b) {
 if (a.category < b.category)
 return -1
 if (a.category > b.category)
 return 1
 return 0
}
// next code component
posts: [
{
 title: 'Fusce ullamcorper tellus',
 category: 1,
 content: 'Fusce ullamcorper tellus sed rutrum maximus. 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 rutrum magna id 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 rutrum magna id 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 rutrum magna id 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 rutrum magna id dapibus.',
 imgUrl: 'https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/plane.jpg'
},
 // And can be so much and receive data without sorting
]
// Lot of code
computed: {
 sortedPosts () {
this.posts.sort(compare)
 return this.posts
}
}

All the magic happened. Instead posts use now sortedPosts to display.
Wrote as you said, but the sorting did not change(:
Code:
<template>
 <v-flex xs12 offset md4-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 of the 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-flat btn class="blue&#45;&#45;text">Read More</v btn>-->
</v-card-actions>
</v-card>
</div>
</v-flex>
</template>

the <script>
 export default{
 data() {
 return {
 posts: [
{
 title: '[1] Fusce ullamcorper tellus',
 category: 1,
 content: 'At sagittis sapien vulputate. Vivamus laoreet lacus rutrum magna id 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 rutrum magna id 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 rutrum magna id 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 rutrum magna id 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 rutrum magna id 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>
- Jamaal_Bode commented on June 8th 19 at 17:16
and why sortPosts filters stick? I'm kind of not well written. - Kameron_Hilpert34 commented on June 8th 19 at 17:19
I just changed the name of the filter for easy understanding (for me). In the loop and filters the names are different. - Jamaal_Bode commented on June 8th 19 at 17:22
this.sortPosts you undefined, and therefore not working. Rename filters in the methods. - oleta.Wi commented on June 8th 19 at 17:25
Yes, the problem was this. Thank you!) - Jamaal_Bode commented on June 8th 19 at 17:28

Find more questions by tags Vue.jsJavaScript