What is the best way to showcase current elements using Vue.js and firebase without them being outdated?

When working with Firebase, I was able to successfully retrieve and print out a list of events. However, now I'm facing a challenge - I want to load only the "Events" that are not outdated. Any suggestions or tips on how to achieve this? I'd greatly appreciate your help. Thank you in advance :) - Max

    loadEvents ({commit}) {
  commit('setLoading', true)
  firebase.database().ref('events').once('value')
    .then((data) => {
      const events = []
      const obj = data.val()
      for (let key in obj) {
        events.push({
          id: key,
          title: obj[key].title,
          day: obj[key].day,
          description: obj[key].description,
          imageUrl: obj[key].imageUrl,
          date: obj[key].date,
          location: obj[key].location,
          creatorId: obj[key].creatorId
        })

      }
      commit('setLoadedEvents', events)
      commit('setLoading', false)
    })
    .catch(
      (error) => {
        console.log(error)
        commit('setLoading', false)
      }
    )
},

UPDATE: Thanks to Frank, I can now filter out nodes based on the "expires" field. How can I specifically retrieve nodes where the date (timestamp) in the "expires" field is greater than yesterday's date?

     loadMeetups ({commit}) {
  commit('setLoading', true)
  firebase.database().ref('Meetups').orderByChild('expires').startAt(Date.now()).once('value')
    .then((data) => {
      const Meetups = []
      const obj = data.val()
      for (let key in obj) {
        Meetups.push({
          id: key,
          title: obj[key].title,
          day: obj[key].day,
          expires: obj[key].expires,
          description: obj[key].description,
          imageUrl: obj[key].imageUrl,
          date: obj[key].date,
          location: obj[key].location,
          creatorId: obj[key].creatorId
        })
      }

Here's an example of how I push my data to Firebase:

  methods: {
  onCreateMeetup () {
    if (!this.formIsValid) {
      return
    }
    const MeetupData = {
      title: this.title,
      day: this.day,
      expires: this.expires,
      location: this.location,
      imageUrl: this.imageUrl,
      description: this.description,
      date: this.submittableDateTime
    }
    this.$store.dispatch('createMeetup', MeetupData)
    this.$router.push('/Meetups')
  }
}

And here is a sample of my data

Best regards,

Answer №1

The determination of when a node expires can vary based on its definition. For example, if you keep track of the timestamp when a child node becomes outdated like this:

child.expires = Date.now();

You can then search for nodes that have not expired by using the following code:

firebase.database().ref('events').orderByChild('expires').startAt(Date.now()).once('value')
  .then((data) => {
    ...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Zustand store does not reflect changes when the URL is updated

I have a Zustand store connected to the URL. See the code snippet provided below. import { create } from "zustand"; import { persist, StateStorage, createJSONStorage } from "zustand/middleware"; const pathStorage: StateStorage = { ge ...

Is it possible to utilize Babel for transpiling, importing, and exporting in the client, all without relying on Web

Is it possible to compile JSX and export variables through the global namespace using Babel? I'm not interested in setting up a Webpack server. I'm currently familiarizing myself with ES6, JSX, Babel, and React, and I find adding another librar ...

How can I implement a page switch in vuejs by clicking on a name in a table list?

I'm currently working on a list page in VueJS and facing some challenges. Here is the code snippet: <template> <vue-good-table :columns="columns" :rows="row" :search-options="{ ...

Encountering difficulty in retrieving data from an unidentified JSON array using Javascript

Exploring the realm of Javascript and JSON, I find myself faced with a challenge - accessing values in an unnamed JSON array. Unfortunately, as this is not my JSON file, renaming the array is out of the question. Here's a snippet of the JSON Code: [ ...

Is it recommended to use Promise.await over async/await?

After starting some new operations in my project, I discovered that db.aggregate needed to be executed asynchronously: db.aggregate( [ { $match: { "records": { $e ...

Tips on saving Firebase Storage image url in Firebase database?

How do I store the URL of an image uploaded to Firebase Storage in Firebase Database? When executing the code below, I encounter the following error: Uncaught (in promise) FirebaseError: Function DocumentReference.set() called with invalid data. Unsuppor ...

Having trouble with Vue image source file paths?

Having an issue with loading an image via file_path on Vue. When using a hardcoded path, it works fine. Refer to the sample code below: JavaScript function getRestaurantsbyId(id) { var restaurants = { "1" : { "name": "xxxx", ...

Using jQuery that has been installed via npm within an Express application

I recently set up a node.js + express application and utilized npm to install jQuery. Within the app.js file, I included the following code: var jquery = require('jquery'); In the header of my html file, I have incorporated JavaScript that rel ...

Tips for building an interactive jQuery data table using JSON information and AJAX requests

Currently, I am attempting to develop a dynamic data table using jQuery and JSON. My objective is to extract the keys from the JSON data and utilize them as headers in the table, while the values within those keys will be displayed as rows. Here's th ...

The onchange() function appears to be undefined, could it be inaccessible from the index.html file?

I have encountered an issue while trying to assign an 'onchange' attribute to a <select> tag in my HTML. The function I defined as filterChanged() in my main.js file (which is bundled into bundle.js) cannot be accessed when the onchange eve ...

Tips for stopping the submission of a form

My current form includes ajax calls: <form method="post" action="?slt=Sbmt" onsubmit="return validateForm()" id="reportform" enctype="multipart/form-data"> <div id="evaluation1"> <h2>Rate Technical Skills</h2> <table class= ...

Initiate a CSS animation only when a different animation has completed

I am trying to create a sequence of animations using 2 squares. I want the animation for the red square to start only after the blue square's animation is complete. How can I achieve this cycle of animations? .box { width: 100px; height: 1 ...

Issue with Vue 3: defineAsyncComponent is not able to resolve .vue files or split chunks properly

I'm currently attempting to dynamically load Vue 3 components in an asynchronous manner. I have come across a function called defineAsyncComponent which is intended to be utilized as shown below: const GameUI = defineAsyncComponent(()=>import(file ...

I am looking to enable dragging for specific columns in the table using [Vue.Draggable]

I am seeking a way to enable dragging of specific columns using this library. My goal is to have a header with two lines and restrict the drag functionality to certain columns only. Unfortunately, achieving this at present seems impossible. The handle sp ...

References are not found in Vue.js

I am attempting to programmatically trigger a button click in vuejs using a javascript method. I am utilizing the following line of code to reference it via the ref tag. Here is my javascript snippet: this.$refs.action.click(); Here is the corresponding ...

Encountering an HTTP parsing failure while sending XML through Angular 5's HttpClient

Struggling to access a local webservice through XML: Take a look at the code below: const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'text/xml', 'Accept': 'text/xml', 'Response- ...

Utilizing numerous X-axis data points in highcharts

I'm working with a line graph that dips straight down, like starting at (1, 100) and dropping to (1,0). The issue I'm facing is that Highcharts (https://www.highcharts.com/) only displays information for one of the points. Is there a way to make ...

Tips for maintaining the selected radio button state after refreshing the JSP page: Ensuring that the radio button remains selected

I need help with refreshing a page after clicking on one of two radio buttons. I've tried multiple solutions but haven't been successful so far. Can someone assist me? <script> $(document).ready(function() { $(document).on('c ...

Link a function to a button in a 3rd party library

Whenever I click a button, there is a possibility of an alertify alert window appearing randomly. The alertify alert popup serves as a more aesthetically pleasing alternative to the traditional javascript Alert. Alertify library Below is a snapshot depic ...

The issue with Angular-gettext is that it fails to update dynamically generated strings in the code

Whenever I try to set the language using the code gettextCatalog.setCurrentLanguage(langString);, it doesn't seem to affect my side-nav menu. My side menu has two possible states: expanded or collapsed, and I use ng-include to control its content base ...