How To Sort Data From An Object In Vue templates?

Question

I am using Firebase. There data is stored as objects with unique keys.

I want to keep these keys for updating purposes.

However I also want to sort the data like an array, when rendering it in my Vue-templates.

The data looks like:

topics:
  - [firebase-push-key]
    - title
    - text
    - ...

I want to sort it in my template like:

<template v-for="topic in $store.state.forum.topics">
  ...
</template>

$store.state.forum.topics should be sorted by the value title.

EDIT:

This Vuex-mutation does the job:

retrieveTopics(state) {
  topics.on('value', (snapshot) => {
    const object = snapshot.val()
    var array = Object.keys(object).map((key) => {
      return { [key]: object[key] }
    })
    state.forum.topics = array
  })
}

But how can I iterate over the resulting array in a vue template?

this is the data structure:

[ { "-Kmbspn0WYBlNXfmfVlR": { "slug": "arne", "title": "Arne" } }, { "-KmbsqiG_9uXzRhHrnXZ": { "slug": "tati", "title": "Tati" } }, { "-KmbsrllgJzV7BA_NeCO": { "slug": "abel", "title": "Abel" } } ]

Could you give an example of your data and how you want to sort it? — Bert, Jun 14 '17 at 17:40

Bert · Answer 1 · 2017-06-14T20:40:46.007

Something like this. Here I'm obviously not using Vuex, but you could use a Vuex getter. If you need the id of the topic in the sorted objects, you could add it in your map.

console.clear()

// topics:
//   - [firebase-push-key]
//     - title
//     - text
//     - ...
  
const topics = {
  "1234":{
    title: "Ziss one starts with Z",
    text: "text1"
  },
  "2345":{
    title: "M is for middle",
    text: "text2"
  },
  "3456":{
    title: "Alpha title",
    text: "text3"
  }
}

new Vue({
  el:"#app",
  data:{
    topics
  },
  methods:{
    sortProperty(prop){
      return (a,b) => {
        if (a[prop] < b[prop])
          return -1;
        if (a[prop] > b[prop])
          return 1;
        return 0;       
      }
    }
  },
  computed:{
    sortedTopics(){
      return Object.keys(this.topics)
        .map(t => {
          this.$set(this.topics[t], 'key', t)
          return this.topics[t]
        })
        .sort(this.sortProperty('title'))
    }
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <div v-for="topic in sortedTopics">
    {{topic}}
  </div>
</div>

Edit

Here is an example that handles your updated data structure.

const topics = [{
  "-Kmbspn0WYBlNXfmfVlR": {
    "slug": "arne",
    "title": "Arne"
  }
}, {
  "-KmbsqiG_9uXzRhHrnXZ": {
    "slug": "tati",
    "title": "Tati"
  }
}, {
  "-KmbsrllgJzV7BA_NeCO": {
    "slug": "abel",
    "title": "Abel"
  }
}]

new Vue({
  el: "#app",
  data: {
    topics
  },
  methods: {
    sortByObjectProperty(prop, getter) {
      return (a, b) => {
        a = getter(a), b = getter(b)
        if (a[prop] < b[prop])
          return -1;
        if (a[prop] > b[prop])
          return 1;
        return 0;
      }
    }
  },
  computed: {
    sortedTopics() {
      const getter = v => v[Object.keys(v)[0]]
      const sorter = this.sortByObjectProperty("title", getter)
      return this.topics.sort(sorter)
    }
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <div v-for="topic in sortedTopics">
    {{topic}}
  </div>
</div>

In this code (as in the above code), sortByObjectProperty is a sort function generator. You pass it any property name it will generate a sorting function for objects that have that property. In order to handle the data structure you have in your topics I added a getter parameter which is a function you can use to tell the sorter how to get the object it needs to sort.

I was worried initially about the performance of v[Object.keys(v)[0]] but that seems to be addressed, at least my own satisfaction, in the comments here.

If you don't have to support IE, or you are using something that compiles to javascript that supports it, you could also define a default for the getter parameter in cases where you don't need to sort by a nested object.

sortByObjectProperty(prop, getter = g => g) {...}

Which you could then use as

const sorter = this.sortByObjectProperty("someProperty")

thank you, but how can I keep the Firebase-Push-Key if I want to update the piece of data?? — Timo Müller, Jun 14 '17 at 18:08
@TimoMüller I mentioned how you might in the post, but I updated the code to show it. — Bert, Jun 14 '17 at 18:11
@TimoMüller I'm sorry, I don't understand. I updated the code to actually add the key. — Bert, Jun 14 '17 at 18:18
isn't there a better solution, one that is one line, and not so much boilerplate code ?!?! — Timo Müller, Jun 14 '17 at 18:34
@TimoMüller Maybe someone will come along and give you a better answer. This one works. I answered a question from you a few days ago I still have zero feedback on. Good luck :) — Bert, Jun 14 '17 at 18:37

How To Sort Data From An Object In Vue templates?

1 Answers1