Firebase: Unexpected behavior observed when editing data - duplicate entries

Utilizing Firebase and Ionic framework (written in TypeScript).

When inserting a new entry (using the push method) into a collection (groups), it displays numerous temporary groups. I have subscribed to them using the on() method and trigger an event when data changes. Therefore, whenever data is added to the database, the changes are immediately reflected on the client side without requiring any user interaction.

A few screenshots could better illustrate what is happening:

Before adding: https://i.sstatic.net/ovVS2.png

After adding a group (test_2) (immediately following a navctrl.pop()): https://i.sstatic.net/uPJIi.png

After triggering a list refresh or when navigating to a group chat and exiting: https://i.sstatic.net/NrTkm.png

If I directly delete 'test_2' from Firebase: https://i.sstatic.net/kwAte.png

None of these 'duplicates' exist within the database, only on the client side. After insertion, all duplicates are considered 'valid', but not after deletion (as it was removed from Firebase). This issue only occurs during data addition or deletion, not during initialization.

Is there a way to prevent this behavior?

typescriptfirebase

Answer №1

After some investigation, I discovered a peculiar behavior with firebase (could it be a bug?) where I needed to deactivate the on() method before reactivating it. Neglecting this step caused the on() method and my subscribe() function to trigger multiple times, overriding my variable reset and resulting in duplicate entries.

To fix this issue, I included an off() method before calling the on() method, which successfully resolved the problem.

this.fireuser.child(firebase.auth().currentUser.uid).child('groups/').off();
this.fireuser.child(firebase.auth().currentUser.uid).child('groups/').on('value', (snapshot) => {...})

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

Utilizing ng-bootstrap within a rebranded module

I'm facing an issue with my nav-bar module that utilizes ng-bootstrap: import {NgModule, NgZone} from '@angular/core'; import { CommonModule } from '@angular/common'; import {NavigationComponent} from "./components/navigation/navi ...

javascriptangulartypescriptng-bootstrap

Error: Undefined property 'pipe' cannot be read - Could this be due to missing configuration in my unit tests for Angular and ActivatedRoute?

I'm currently encountering a problem with an Observable that is based on the paramMap of my activatedRoute this.current$ = this.route.paramMap.pipe(map(paramMap => paramMap.get('title'))); Everything works fine on the front-end, but now ...

angulartypescriptunit-testingroutes

Sending data to a React component from regular HTML

I have a question about implementing a method to pass custom attributes from HTML elements as props to React components. Here's an example: function someFunction(props) { return <h1>props.something</h1> } HTML: <div id="someEl ...

javascripthtmlreactjstypescriptfrontend

Can Angular components be used to replace a segment of a string?

Looking to integrate a tag system in Angular similar to Instagram or Twitter. Unsure of the correct approach for this task. Consider a string like: Hello #xyz how are you doing?. I aim to replace #xyz with <tag-component [input]="xyz">&l ...

javascripthtmlangulartypescript

Creating push notifications once firebase has been installed

I successfully implemented Firebase into my project and meticulously followed all the necessary steps to enable push notifications within the app. To validate the push notifications, I sent some test notifications from the Firebase console. This is the tu ...

iosswiftfirebasepush-notificationfirebase-cloud-messaging

Is it possible to transform a webpack bundled javascript file into typescript source code?

Is it possible to decompile a webpack-bundled JavaScript file into TypeScript source code? I have a bundle.js file that was bundled using webpack, but the original source code files were accidentally deleted. I am hoping to reverse engineer the bundle.js ...

typescriptwebpack

Attempting to call a function with a template variable is not allowed

@Component({ selector: 'modal', ... }) export class SimpleModal { modalOpen: boolean; isModalOpen(): boolean { return this.modalOpen; } } <modal #modalRef> <div *ngIf="modalRef.isModalOpen()">...</div> </mo ...

angulartypescript

Getting the item that was clicked on a Chart in a PrimeNG chart within an Angular application can be achieved by following these

I am trying to implement a bubble chart and I would like the function to be called when a user clicks on one of the bubbles. What is the best way for me to pass the data to this function? https://i.stack.imgur.com/FYiSP.png <p-chart type="bubble" [da ...

angulartypescriptchart.jsprimengbubble-chart

Obtain document via Angular 2

Is it possible to use TypeScript to download an image that is already loaded? <div *ngIf="DisplayAttachmentImage" class="fixed-window-wrapper_dark"> <button class="btn btn-close-window" (wslClick)="HideAttachmentImage()"> & ...

javascripthtmlangulartypescriptdownload

Tips for preventing a promise from being executed more than once within an observable while being subscribed to a BehaviorSubject

I've defined a class called Store with the following structure: import { BehaviorSubject, Observable } from 'rxjs' export abstract class Store<T> { private state: BehaviorSubject<T> = new BehaviorSubject((undefined as unknown ...

javascriptangulartypescriptrxjs

Implement zoom functionality on a line chart using d3js

I am currently working on integrating a d3js V4 chart into an Angular 4 application. The chart is designed to show multiple sets of data as individual lines. One issue I am facing is getting the zoom feature to function correctly, specifically on the X-ax ...

angulartypescriptd3.jschartszooming

Gulp is failing to generate bundled files

I'm having trouble generating my bundle files. Everything was running smoothly until I attempted to update to gulp4, and now that I've reverted back to gulp3, the files are not appearing in my dist directory. Gulp successfully created the files i ...

typescriptgulp

The attribute 'listen' is not a valid property for the data type 'NavigateFunction'

Just diving into the world of Typescript and react, I recently made the switch from useHistory to useNavigate in react-router-dom v6. However, when using the navigate.listen(e) method inside the useEffect hook, I am encountering the error "Property ' ...

reactjstypescriptreact-routerreact-router-dom

Tips for enhancing express.Request using tsserver and JSDoc

Recently, I have been utilizing tsserver with JSDoc in vim while working on a JavaScript project. Unfortunately, I've encountered an issue that needs resolving: /** @type {import('express').Handler} */ function requireUser(req, res, next) { ...

node.jstypescriptjsdoctsserver

How can one trigger a service method in nestjs through a command?

I am looking to run a service method without relying on API REST - I need to be able to execute it with just one command ...

node.jstypescriptnestjs

Expanding the current @types type definition to encompass additional properties that are currently absent

Currently, I am utilizing the most recent @types for leaflet in my project (v1.2.5), however, they do not align with the latest version of leaflet (1.3.x). Specifically, their LayerGroup interface lacks a setZIndex property which I need to include by exte ...

typescriptleaflettypescript-typings

What is the best way to receive the result of an asynchronous function as an input and showcase it using express?

I have recently started learning about node and express My goal is to create an API that can fetch data from an external source and use that data for my application Is there a way to retrieve the result of an asynchronous method and display it using the ...

javascriptnode.jstypescriptexpressnodes

Using MUI DatePicker and react-hook-form to implement a date picker in the format DD/MM/YYYY

I have developed a custom datePicker component that combines react-hook-form and Material UI. However, I am encountering an issue where the values are being displayed in the format: "2024-04-10T22:00:00.000Z" Below is the code snippet: import { Localizati ...

reactjstypescriptmaterial-uiformatreact-hook-form

Is there a way to directly increment a variable in an Angular 4 template binding?

Presented here is an object that I am working with: this.people = [{ name: 'Douglas Pace', title: 'Parcelivery Nailed The Efficiency', content: 'Since I installed this app, its always help me book every ...

angulartypescriptlocal-variablesangular-template

Set the default requests header in Ionic 3 using data stored in Ionic Storage

This particular issue is related to retrieving a value from local storage. I am trying to set the default header (Authorization token) for all requests, but I can't seem to find a solution that works efficiently. Most of the resources available only e ...

angulartypescriptionic-framework