What is the best technique for verifying the existence of data in the database before making updates or additions with Angular's observables?

I am facing a straightforward issue that I need help with in terms of using observables effectively. My goal is to search my database for a specific property value, and if it exists, update it with new data. If it does not exist, then I want to add the new data with the property value. I am currently working with Angular 10.0.7 and leveraging httpClient.

Here's what I intend to achieve:

saveData(data: DataObject) {

  this.httpClient.get<DataObject>(
     this.DATA_BASE_URL + this.user.username + ".json"
  ).subscribe(response => {
     response.propertyName = data;
     if (response.hasOwnProperty("propertyName")) {
      this.httpClient.patch(
          this.TEST_DB_URL + this.user.username + ".json",
          response
        ).subscribe(r => {
          console.log(r);
        })
     } else {
      this.httpClient.put(
          this.TEST_DB_URL + this.user.username + ".json",
          response
        ).subscribe(r => {
          console.log(r);
        })
     }
  })

}

I am unsure if nesting http calls within the subscribe() method is the best approach. Could you suggest a more conventional or efficient way to implement this logic? Thank you for your assistance!

Answer №1

Utilizing switchMap, you can change the response from one call to another response from an inner call.

 this.httpClient.get<DataObject>(
     this.DATA_BASE_URL + this.user.username + ".json"
  ).pipe(switchMap(response => {
     //handling the response
     response.propertyName = data;
     if (response.hasOwnProperty("propertyName")) {
       return this.httpClient.patch(
          this.TEST_DB_URL + this.user.username + ".json", response
        );
     } else {
      return this.httpClient.put(
          this.TEST_DB_URL + this.user.username + ".json", response
        );
     }
    })).subscribe(result => {
          console.log(result);
    })

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

How to Send Data with NodeJS by Utilizing the Finish Event

Is there a way to retrieve the JSON data sent during the nodejs finish event? This is how I send the JSON data: oResponse.json({ version: "1.0.0", author: "Someone", contributors: "also Someone" }); I would like ...

I encountered an issue while making customizations to my default next.config.js file. Despite attempting various solutions, I consistently encountered an error regarding the invalid src property

I'm currently trying to introduce some custom configurations into the next.config.js file. However, I keep encountering an error regarding an invalid src prop. Despite my attempts to troubleshoot in various ways, the error persists. // ...

Ways to modify the access control to permit origin on a specific API URL in React

https://i.stack.imgur.com/tqQwO.png Is there a way to modify the access control allow origin for a URL API? I keep encountering error 500 whenever I try to load the page. After logging in, I included this code snippet: const options = { header ...

encountering a glitch while setting up Angular Material

Following the installation of angular-material using this command npm install --save @angular/material @angular/animations @angular/cdk Encountering an error when attempting to run 'ng serve'. This is perplexing because a similar installation ...

The JSX component cannot be named 'Stack.Navigator' or used as such

Encountering a type issue with react navigation using Stack.Navigation or Stack.Group from createNativeStackNavigator The error message indicates that the types do not match with JSX.element. Specifically, it states: Type '{}' is not assignable ...

Utilize the value of one variable to determine access to another variable in Javascript

I am working with several boolean variables and I want to create a new variable that keeps track of the most recently changed boolean variable. This way, every time a new boolean variable is modified, I can toggle the previous one. If you have any ideas o ...

Developing a constructor method that is conscious of data types

In my current scenario, I am dealing with a set of types: X, Y, and Z, all of which extend the same common interface J. My goal is to define a method that looks like this: class MyClass { private someNumber = 1; private someProperty; addEleme ...

Generating a unique serial ID using Angular/JS

I am in the process of developing a function that will create a unique serial id by replacing a string with the format; xxxx-xxxx-xxxx-xxxx. The desired outcome is a serial like this: ABCD-1234-EFGH-5678, where the first and third parts consist of letters ...

A guide on implementing a "Select All" trigger in mat-select with Angular8/Material

Here is the code I have created: <mat-form-field appearance="outline"> <mat-label>Handler Type</mat-label> <mat-select multiple [(value)]="handlerType"> <mat-option *ngFor="let handler of handlerT ...

Experiencing a RepositoryNotFoundError in TypeORM, although I am confident that the repositories are properly registered

I am creating a new application using Next.js + TypeORM and encountering an issue with the integration. RepositoryNotFoundError: No repository for "User" was found. It seems like this entity is not registered in the current "default" connection? Althoug ...

Error encountered while bundling CDK Synth with Node.js function - Kindly ensure to update your lock file by running `npm install` before proceeding further

As I attempt to utilize AWS CDK for creating a Lambda function, I am facing a challenging error: "npm ERR! npm ci can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file ...

Creating a List programatically in material-ui can be easily achieved by following these steps

I am attempting to create a contact view using the list component from Material-UI. My code is written in typescript, but I am struggling with setting up react and material-ui correctly. Any guidance would be greatly appreciated. export interface IConta ...

What is the reason for an optional object property being assigned the 'never' type?

I'm having trouble understanding the code snippet below: interface Example { first?: number, second?: { num: number } } const example: Example = { first: 1, second: { num: 2 } } function retrieveValue<Object, Key exte ...

Angular 4 application encountering 'Access-Control-Allow-Origin' issue

Attempting to reach the following URL: Manually accessing works without issue. However, trying to access via an Angular 4 request results in: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://loca ...

Refresh a Google chart without having to reload the entire page

I currently have a button that allows me to refresh the data on my page in case there is new data available through an API. Although this button successfully refreshes my datatable, it does not redraw the Google charts I have integrated into my project usi ...

Struggling to increment the badge counter in a React Typescript project

I'm a bit unsure about where to apply the count in my Badge Component. The displayValue should include the count, but I'm struggling with how to implement it. UPDATE: The counter is now in place, but when I decrease the count and it reaches 0, t ...

Why do I keep getting errors in TypeScript when I manipulate DOM elements using getElementsByClassName(), even though my application still functions properly?

I am dealing with an Angular2 application. Unfortunately, I have had to resort to using the following code within a component method (I know it's not ideal, but...): let confirmWindowDOM = document.getElementsByClassName('modal')[0]; confir ...

Tips for managing errors when using .listen() in Express with Typescript

Currently in the process of transitioning my project to use Typescript. Previously, my code for launching Express in Node looked like this: server.listen(port, (error) => { if (error) throw error; console.info(`Ready on port ${port}`); }); However ...

I want to make my code available as an npm library on GitHub, but when users install it, I want them to only get

When pushing the code to GitHub, I also need to include the dist folder. However, when running the command npm i <github-url>, I want the node_modules files to be downloaded and placed inside the dist folder. ...

Passing a Typescript object as a parameter in a function call

modifications: { babelSetup?: TransformationModifier<babel.Configuration>, } = {} While examining some code in a React project, I came across the above snippet that is passed as an argument to a function. As far as I can tell, the modifications p ...