Why isn't the real-time database updating properly?

   addNewDevice(deviceId: string, fireId: string){
    let Token: string;
    let UserId: string;
    let newlyAddedDevice: Device;
    return this.authSrv.userId.pipe(take(1),
      switchMap(
        userId => {
          UserId = userId;
          return this.authSrv.token;
        }
      ),take(1),
      switchMap(
        token => {
          if(!UserId){
            throw new Error('No user id found');
          }
          Token = token;
          return this.http.get<DeviceData>(`https://....firebaseio.com/device/${fireId}.json? 
          auth=${token}`)
        }
      ),
      switchMap(
        deviceData => {
          if(!deviceData){
            throw new Error('No Device Id found or Pass Id incorrect');
          }
          newlyAddedDevice = new Device(
              fireId, 
              deviceData.deviceId,
              deviceData.ver,
              deviceData.slot,
              UserId
          );
          this.http.put(`https://....firebaseio.com/device/${fireId}.json?auth=${Token}`,
            {...newlyAddedDevice, id:null}
          );
          return this.devices;
        }
      )
    );
  }

Upon receiving data from the "get()" method, I noticed that the "put()" method is not updating my Firebase database, and no errors are being displayed. I attempted to debug using "console.log" to view the input data.

I utilized the following code as a reference point:

 places => {
  const upPlaceIndex = places.findIndex(pl => pl.id == placeId);
  upPlace = [...places];
  const oldPlace = upPlace[upPlaceIndex];
  upPlace[upPlaceIndex] = new Place(.....);
  return this.http.put(`https://....firebaseio.com/offers-places/${placeId}.json? 
  auth=${fetchToken}`, 
  {...upPlace[upPlaceIndex], id: null}
 }

This code successfully worked in another project of mine.

Answer №1

It finally clicked for me, even though I still don't fully understand why

    switchMap(
        deviceData => {
          if(!deviceData){
            throw new Error('No Device Id found or Pass Id incorrect');
          }
          newDevice = new Device(
              fireId, 
              deviceData.deviceId,
              deviceData.ver,
              deviceData.slot,
              UserId
          );
          this.http.put(`https://....firebaseio.com/device/${fireId}.json?auth=${Token}`,
            {...newDevice, id:null}
          );
          return this.devices;
        }
      )

I decided to modify it like this instead

switchMap(
        deviceData => {
          if(!deviceData){
            throw new Error('No Device Id found or Pass Id incorrect');
          }
          newDevice = new Device(
              fireId, 
              deviceData.deviceId,
              deviceData.ver,
              deviceData.slot,
              UserId
          );
          return this.http.put(`https://....firebaseio.com/device/${fireId}.json?auth=${Token}`,
            {...newDevice, id:null}
          );
        }
      ),
     switchMap(
      data => {
        return this.devices;
      }
     )

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

TypeScript focuses on checking the type of variables rather than their instance

Is there a way to pass a type (not an instance) as a parameter, with the condition that the type must be an extension of a specific base type? For example abstract class Shape { } class Circle extends Shape { } class Rectangle extends Shape { } class ...

Show the currency values with decimal points

How can I modify this code to display the currency value with fractions and the 3 characters for the currency type? <td>{{transaction.amount | currency: transaction.currency}}</td> Instead of $10,080.00, I'm looking to display it as 10,0 ...

Protect a web address with the power of AngularJS, Firebase, and S3

I am looking to create a website using an AWS S3 bucket for storing videos, along with AngularJS and Firebase for authentication. My main concern is ensuring that the URL to access the video content (/video) is secure and can only be accessed by authentica ...

Manage interfaces and structures

I am looking to implement user roles in my application. Here is a snippet of the code I would like to use: export interface User{ name: string roles: Roles[] } interface Roles{ ADMIN: new Permissions(1,1,1,1,1), MOD: new Permissions(1,0,1,1,0,0), [. ...

Incorporating an external module into your Angular application for local use

I currently have two projects: my-components, which is an Angular library, and my-showcase, an Angular app. Whenever I make changes or add a new component to my library, I commit it to a private git repository and publish it to a private npm registry. This ...

The element Component is not recognized even after importing the module and applying the CUSTOM_ELEMENTS_SCHEMA schema

Recently, I integrated PinchZoom into my Angular 6 project as a node module called ngx-pinch-zoom. It's important to mention that my project is also based on Ionic 4. Within my app.module.ts file, I imported the PinchZoomModule and included CUSTOM_EL ...

What is the most effective way to retrieve data from a URL and process it using reactjs?

Looking to consume JSON data from a URL, here is an example of the JSON structure: { "results": [ ... ], "info": { ... } } I aim to display the fetched data as a component property. What is the most efficient way to achie ...

Extending IAngularStatic - navigating the challenges

Recently, I sought help with a question similar to this one and despite receiving assistance, I am still struggling with the code. In my typescript file, I have created a small service to work with the google api (referred to as gapi) along with an interf ...

Transforming a collection of string arrays into a tree format, as well as reversing the process to convert the tree back into a list of string arrays

I am working with a sorted array containing lists of string arrays: 0:['BS', 'MS','KHB', 'CCBPO'] 1:['BS', 'MS','KHB', 'HBPO'] 2:['BS', 'MS','KHB' ...

Is it possible to use a TypeScript Angular (click) event with an object property as the value?

Seeking assistance in creating a dynamic error card featuring various error messages along with a retry button. Below is a snippet from my TypeScript object: errorCard: any = []; if(error) { this.errorCard.errorMessage = "Oops, please try again"; ...

Explore flat data querying using Firebase and AngularFire

I am working with data stored in firebase, utilizing a flat structure with key-value pairs to establish a many-to-many relationship between events and users (see figure 1). While it's straightforward to look up events associated with a user using pure ...

Utilize multiple activated modules in Angular 2

Recently, I've been exploring the new features of Angular 2 final release, particularly the updated router functionality. An interesting example showcasing the router in action can be found at this link: http://plnkr.co/edit/mXSjnUtN7CM6ZqtOicE2?p=pr ...

"CKEDITOR" is not defined in the ng2-ckeditor script

After completing the following steps: ng2-ckeditor Installation - JSPM : jspm install ng2-ckeditor=github:chymz/ng2-ckeditor - NPM : npm install ng2-ckeditor Creation of ts file: import {Component} from 'angular2/core'; import {CKEditor} fro ...

Ways to modify the datepicker format in Angular Material

I am currently facing an issue with the date format generated by the angular material datepicker...Wed Nov 21 2018 00:00:00 GMT+0530 (India Standard Time) My requirement is to receive the date in either (YYYY-MM-DD) or (YYYY-MM-DDTHH:mm) format. Here is ...

Potential absence of value in Typescript object

interface c { state?: {b: string} } const x: c = { state: {b: 'c'}} console.log(x.state.b) The code snippet above shows an interface called c with an optional property called state. Although the property b of the state object is accessed i ...

In Angular 4, I encountered an issue where adjusting the height of the navigation bar caused the toggle button to no longer expand the menu in Bootstrap

In the process of developing an angular application, I encountered a situation where I needed to adjust the height of the nav bar using style properties. After making the necessary changes, everything was working fine. However, a problem arose when I mini ...

Angular and RxJS work together to repeat actions even when an HTTP request is only partially successful

I am currently attempting to achieve the following: Initiate a stop request using a stored ID in the URL. Send a request with a new ID in the URL and save this new ID. If the response code is 200, proceed as normal. If it is 204, repeat steps 1 and 2 with ...

The TypeScript error reads: "An element is implicitly assigned the 'any' type because an expression of type 'any' cannot be used to index a specific type."

[Hey there!][1] Encountering this TypeScript error message: { "Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ 0: { image: string; title: string; text: string; }; 1: { ...

Guide on updating a property key in Firebase real-time database with Angular 7

Is it possible to modify the key of a property in my firebase database that I have been struggling with? ...

Are there any disadvantages to keeping the selector of routed components in place?

The instructions in the Angular routing documentation - Add heroes functionality mention making some adjustments: Several changes need to be made: -Remove the selector (routed components do not need them). -Remove the <h1>. Is it beneficial to kee ...