Unable to submit data to the server and not receiving any response from the server

I'm encountering an issue with posting data to the server. When I click on the button to submit the form, the data is received in the API service class but it's not getting sent to the server as expected. All other API methods in the service class are functioning properly, but when it comes to posting data, there seems to be a problem - no response is received from the server and upon checking the database, there are no entries:

service.ts: The orgId parameter is a string passed in the URL as a foreign key for adding addresspostmodel, and the data parameter is a JSON object. To accommodate more fields in the actual table which are auto-generated, I am using data:any. Interestingly, when testing with Postman, the same API and URL work perfectly fine with the given JSON object:

service.ts:

public postFormData(orgId: string, data: any): Observable<AdressModel> {  
   return this.http.post<any>(`${this.ApiUrl}/${orgId}/addresses`, data).pipe(
   tap(response => console.log(response)), catchError(this.handleError));

}

onSubmit(){
this.data =
  {
    "city": "test",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3b7a6b0b783a4a6aeaaaaafeda0acae">[email protected]</a>",
    "name": "test2",
    "recipient": "test",
    "street": "test",
    "zipCode": "12345"
  }
 
this.ApiService.postFormData(this.organizationId, this.data);

}

The data received here is actually fetched from a form, but for illustration purposes, I've provided a mock JSON object. Both the API data and the JSON object appear correct to me when viewed in the console:

{

"city":"test", "email":"[email protected]", "name":"test2", "recipient":"test", "street":"test", "zipCode":"12345" }

Can someone assist in identifying the issue with the logic?

Answer №1

Observables have a lazy nature, requiring you to subscribe in order to trigger requests sent to the server.

To send data using this.ApiService.postFormData method and receive a response, make sure to subscribe to it like this: (resp) => console.log(resp));

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

Submitting the form once validation is finished, ensuring that the input field retains its value

I am currently developing a web application and I'm facing an issue while trying to incorporate the Spring Web MVC 3.0 framework. My goal is to validate input fields from an XHTML page. When the form (which contains one input field) is submitted, the ...

What is the method for implementing two-way binding on a checkbox in Angular?

Within my accordion, I have a series of options in the form of checkboxes. Users are able to select these checkboxes, but I am seeking a way to pre-select certain checkboxes based on specific conditions. The challenge arises when these conditions are deter ...

Firebase and Nx: Encountering issues with running emulators

I've been attempting to launch the Firebase emulators within the Nx workspace. Initially, I added firebase to my project: npm install firebase @angular/fire --save nx g @angular/fire:ng-add // configures the package in the project (unsuccessful) ng ...

What is the correct way to access and assign a value from a different getter or setter? I am facing an issue with the creation of my second array

Two http GET API calls are being made in the constructor. The first call is working fine and has a getter/setter to filter the main array (studentNameData) into a filtered array (filteredName). However, the second call is also trying to do the same thing b ...

Display corresponding JSON images of items within an *ngFor loop in Angular

For my latest project, I am using Angular for the front-end and Laravel for the back-end. The issue I'm facing is with displaying images in Angular that are stored in Laravel storage. The image URLs are stored in the database in JSON format like this: ...

Analyzing time stamps in Android/Firebase across two distinct users

I'm currently developing a train app for my college project using Java and Android. The app scenario involves only one seat available on the train, with multiple people trying to book it simultaneously. I want the app to allocate the seat to the user ...

What causes the exception in JavaScript to be an empty object?

try { let temporary = null; temporary.split(','); } catch (error) { Logger().info('caught error: ', error, error.constructor); } output: caught error: {} undefined I attempted to use JSON.stringify and encountered the sa ...

Guide on generating a new collection by utilizing computed data from an existing collection in MongoDB

Hello, I am interested in creating a new collection by obtaining computed data from an existing collection. Here is some sample data: {MID:100,stage:6, hustle:[{id:1,name:"jack",level:4,target:10,completedTime:new Date("2015-12-12")}, {id:1,name: ...

Top tips for finding an estimated solution to determine the shortest path that traverses all nodes

Is there an algorithm or method available for achieving this task? I am faced with a challenge where I have nodes connected by arcs, and I need to find a solution for uncovering an approximate shortest path that passes through all the nodes only once. Du ...

What is the process for adding annotations to a React functional component that includes both props and states?

I'm currently in the process of developing a React Native app that consists of a parent component and a child component. The child component contains a button with an event handler that is located in the parent component. Upon triggering the event han ...

What is the best way to wait for a series of subscriptions to complete?

I am currently facing challenges with Observables while working on a complex REST API query function that involves intricate logic and multiple requests and responses. Although I have already written numerous functions with subscriptions like the ones bel ...

Integrate a post AJAX call into an Angular service for seamless functionality

I have come across an interesting scenario where I have to integrate old ajax code into a new Angular 10 application as per project requirements. Is it possible to directly run the existing ajax calls in the Angular service? Or, is there any node module ...

Conditional return type mistakes

I'm facing an issue with a function that takes a parameter "value" and is supposed to return 0 or 1 based on its true or false value. Check it out here. const f = <T extends boolean>(value: T): false extends T ? 0 : 1 => { if (value === ...

Using the same inner class in multiple List classes - is it possible?

Currently, I am tackling a challenge involving the implementation of various linked lists. Each list class contains two inner classes - a Node-class and an Iterator-class. Interestingly, these inner classes are essentially duplicates of each other. In the ...

Error message: Android encountered a Force Close due to a java.lang.ClassCastException. The app HttpGetAndroidExample could not be cast to android.app

Receiving the force close error below: java.lang.ClassCastException: com.example.httpgetandroidexample.HttpGetAndroidExample cannot be cast to android.app Attempting to run the given code, but unsure why. package com.example.httpgetandroidexample; impor ...

What kind of regular expression can be used to search for a string that does not include a specific

I am currently developing a tool for checking Java coding guidelines within a project. One of the guidelines specifies that variables should only be declared as "private static final ..." and not "private static ...". I am trying to figure out how to ac ...

Mistakes & Failures: Problems encountered while running tests on karma

Whenever I try to execute mvn install in an Angular project, I encounter errors and build failures during the execution of unit tests. The error messages indicate issues with the '@angular-devkit/build-angular/plugins/karma' karma plugin: [INFO] ...

Opening another Activity causes the Main Activity to reset

Just a quick question about activity behavior. Currently, I have a Main_Activity with layout changes and updates. However, when I launch another Activity from the Main_Activity, and then try to go back to the Main_Activity, it seems to reset like I've ...

How can I utilize Material-UI's DataGrid component to incorporate multiple layers of text within a single cell?

I'm having trouble displaying two separate lines of text in a single cell using Material-UI's datagrid component. Here is the code I have attempted: const columns: ColDef[] = [ { field: "name", headerNam ...

When combining Angular4, Protractor, Cucumber, TypeScript, and webpack-dev-server, Angular seems to have gone missing

Operating System: macOS Sierra 10.12.4 Node Version: v7.9.0 Npm Version: 5.0.3 Cucumber-js Version: 2.3.0 Protractor Version: 4.0.14 TypeScript Version: 2.2.2 Webpack-dev-server Version: 2.4.5 I encountered an issue while running end-to-end tests. When tr ...