firebase - .orderByChild() 不适用于 Firebase (vue.js)

标签 firebase vue.js firebase-realtime-database vuex vuetify.js

我尝试使用 .orderByChild 对数据进行排序,但数据是按节点名称过滤的。

我在 Firebase 上添加了此内容:

   "concerts": {
  ".indexOn": "expires"
}

这是我的 index.js 文件中的代码:

loadConcerts ({commit}) {
  commit('setLoading', true)
  firebase.database().ref("concerts").orderByChild("expires").startAt(Date.now()/1e3).limitToFirst(7).once("value")
    .then((data) => {
      const concerts = []
      const obj = data.val()
      for (let key in obj) {
        concerts.push({
          expires: obj[key].expires,
          ...
        })
      }
      commit('setLoadedConcerts', concerts)
      commit('setLoading', false)
    })

我还添加了这个:

getters: {
loadedConcerts (state) {
  return state.loadedConcerts.sort((concertA, concertB) => {
    return concertA.expires > concertB.expires
  })
},
loadedConcert (state) {
  return (concertId) => {
    return state.loadedConcerts.find((concert) => {
      return concert.id === concertId
    }) 
   }

也许有人有线索?谢谢

最佳答案

为了以正确的顺序列出值(按过期),您应该使用 forEach()方法而不是直接使用 data.val()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>
  </head>

  <body>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: '......',
        authDomain: '......',
        databaseURL: '......',
        projectId: '......',
        storageBucket: '......'
      };
      firebase.initializeApp(config);
      firebase
        .database()
        .ref('past')
        .orderByChild('expires')
        .startAt(Date.now() / 1e3)
        .limitToFirst(7)
        .once('value')
        .then(data => {
          const concerts = []
          data.forEach(element => {
            console.log(element.val());
            concerts.push({ id: element.key, expires: element.val().expires});
          });
        });
    </script>
  </body>
</html>

PS:如果你想以相反的顺序订购,只需将-1*expires的值存储在另一个字段中

关于firebase - .orderByChild() 不适用于 Firebase (vue.js),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53229849/

相关文章:

javascript - Firebase 数据库 : how to resolve a Promise and keep listening to Firebase DB changes

ios - 如何使用 Firebase 在 IOS 上实现 Server-Sent Events?

java - 如何显示 firebase 数据库中的所有标记?

vue.js - "export ' 默认值 ' (imported as ' Vue ') was not found in ' Vue'

javascript - 性能以及何时将数据加载到 JS 框架中

javascript - 使用vue webpack-simple解析css失败

ios - 从 Firebase 打印所有子列 - iOS Swift 4

android - Firebase 分析人口统计

java - Android Firebase : invalid case sensitive name

android - 发布时 Firebase Phone Auth 不起作用 (Android)