Submitting Data in Ionic 3 using Http Post and Storing in Sqlite with Angular 4

I am facing an issue while trying to post an array of contacts on a WebService.

When I send the array, the data appears as NULL in the WebService response.

I am confused about how to use Let params{}

The error message shows "object undefined".

Additionally, the POST method is not functioning properly.

My technology stack includes Ionic3 - Angular4 and Sqlite.

Here's a snippet from my home.ts file:

public contactos: any [] = [];

constructor(public navCtrl: NavController,
    private sqlite: SQLite,
    private toast: Toast,
    public http: Http) {
    }
        postRequest(){
                this.sqlite.create({
                name: 'ionicdb.db',
                location: 'default'
            }).then((db: SQLiteObject) =>{
              db.executeSql('SELECT * FROM Contactos ORDER BY rowid DESC', {})
              .then(result =>  {
                this.contactos = [];
                for(var i=0; i<result.rows.length; i++) {
                  this.contactos.push({
                    rowid:result.rows.item(i).rowid,
                    nombre:result.rows.item(i).nombre,
                    telefono:result.rows.item(i).telefono,
                    ext:result.rows.item(i).ext,
                    correo:result.rows.item(i).correo,
                    empresa:result.rows.item(i).empresa})  

                    var headers = new Headers();
                    headers.append("Accept", 'application/json');
                    headers.append('Content-Type', 'application/x-www-form-urlencoded');
                    let options = new RequestOptions({ headers: headers });
                    let params = { 
                      nombre: 'Sergio',
                      telefono: '1234567',
                      ext: '000',
                      correo: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b011e091c12141f101a16... // abbreviated for brevity
                }

                 this.http.post("http://181.48.244.108/FeriaDutotec/api/Contactos1", JSON.stringify(params), options)
                .subscribe(contactos => {
                this.contactos.push(contactos.json())
                console.log(contactos ['_body']);
                this.toast.show('Datos Sincronizados!' , '4000', 'center').subscribe(
                  toast => {
                    console.log(contactos);
                  }
                )
                }, error => {
                console.log(error.message);// Error obteniendo los datos!
                this.toast.show('Error en la sincronizacion!'+ error.message, '4000' , 'center').subscribe( // abbreviated for brevity
                  )
                  }); 
    }  
        console.log('Result')
        })
        .catch(e => console.log(e));
        console.log('Create')
        }) 
        .catch(e => console.log(e));
        }

Answer №1

Kindly update this line

this.http.post("http://181.48.244.108/FeriaDutotec/api/Contactos1", JSON.stringify(this.contactos), options)

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

Issue encountered while generating a fresh migration in TypeORM with NestJs utilizing Typescript

I am currently working on a Node application using TypeScript and I am attempting to create a new migration following the instructions provided by TypeORM. Initially, I installed the CLI, configured my connection options as outlined here. However, when I ...

Keep the list up-to-date by adding new items promptly

Utilizing Angular 7, I have implemented the following service (Click here for StackBlitz Example): @Injectable({ providedIn: 'root' }) export class TodoService { todos: BehaviorSubject<Todo[]> = new BehaviorSubject([ { id: 1, tit ...

What is the method for assigning 'selective-input' to a form field in Angular?

I am using Angular and have a form input field that is meant to be filled with numbers only. Is there a way to prevent any characters other than numbers from being entered into the form? I want the form to behave as if only integer keys on the keyboard ar ...

trouble seeing images with an array input and ngFor in Angular

I am encountering issues while attempting to exhibit an array of images by their source link using ngFor. It seems like there are errors hindering the functionality! Below is the image HTML code located within my card component: <div class="Session-Pa ...

Leveraging the information retrieved from Promise.all calls

Using the service method below, I send two parallel queries to the server with Promise.all. The returned results are stored in the productCategoryData array, which is then logged to the console for verification. Service method public getProductCategoryDa ...

Applying ngStyle based on changing information

I am struggling with setting the fill and stroke of an SVG path element based on the values in an array named shirts. <path class="st2" style="stroke-width:2.0;" [ngStyle]="myStyle(4)" d="M11.5,315....315.9z"/> In my code, I have defined a function ...

Unexpected runtime error when using Prisma with NodeJS and Express

While starting the server, I encounter an error message saying [ERROR] 14:48:46 Error: Cannot find module './runtime/library'. The stack trace points to the directory named prisma. Even after executing npx prisma generate, the directory called p ...

Sharing information with a child component

I am currently working on creating a Github search app using the Github API, but I am facing some challenges with passing data to a child component. The goal is for the user to click on the "view profile" button, which will lead to a URL like user/userID a ...

Custom React component - DataGrid

Just starting out in the world of React and attempting to create a custom component with parameters. I'm curious about the correct approach for achieving this. Here's my current code snippet - how do I properly pass Columns, ajax, and datasourc ...

What are the steps to enable generators support in TypeScript 1.6 using Visual Studio Code?

I have been working with ES6 in Visual Studio Code for some time now, but when I attempt to transition to TypeScript, I encounter errors like: Generators are only available when targeting ECMAScript 6 Even though my tsconfig.json file specifies the ES6 ...

Tips for displaying an element for each item chosen in a multi-select box

I currently have a situation where I am rendering for every selected element within my multiselect angular material selectbox. The rendering process functions correctly when I select an element, but the issue arises when I try to deselect one - it just ke ...

What is the best way to retrieve the value of an input field in React when incorporating Material UI components?

I am working with a few radio input components that have been imported from material Ui react. Each radio input is wrapped in a FormControlLabel component. <FormControlLabel onClick={checkAnswerHandler} value={answer} control={<Radio color=&quo ...

Tips for implementing the select all feature in mat-checkbox for Angular 5

Here is the code snippet from my HTML template: <mat-card> <mat-card-content> <h2 class="example-h2">Select Employee</h2> <section class="example-section"> <mat-checkbox [(ngModel)]="ch ...

Tips on harnessing the power of CreateReducer within the ActionReducerMap<State> entity?

I'm trying to use the CreateReducer method to create a reducer, but I'm running into issues and not sure why it's not working. I attempted to modify the State class, but that doesn't seem to be the right approach. export const reducer ...

Receiving an error when triggering an onclick event for a checkbox in TypeScript

I am creating checkboxes within a table using TypeScript with the following code: generateTable(): void { var table = document.getElementById("table1") as HTMLTableElement; if (table.childElementCount == 2) { for (var x = 0; x < 2; x++) ...

Searching for a foolproof oauth framework that includes efficient refresh tokens

Currently, I am implementing oauth with refresh tokens for my Angular application and have a specific set of requirements: Automatically refresh the token when 5% of its time is remaining Handle situations where there is a loss of internet connection (re ...

Hey there! I'm looking to add up all the values in my sqlite database to calculate the total sum using Flask in Python. Can you help me out with

Included in the code are model and view declarations using Flask and SQLAlchemy libraries. The app.route function retrieves data from an account query and prints all amounts stored in the database. The initial code works without errors, displaying all amo ...

Error: The page "..." contains an invalid "default" export. The type "..." is not recognized in Next.js

Currently, I have a functional component set up for the Signup page. My goal is to define props within this component so that I can pass the necessary values to it from another component. This is my current approach: export default function SignupPage({mod ...

Is dynamic routing in Angular 8 only functional when utilizing RouterLink?

While working on dynamic routing in Angular, I ran into a strange issue. Dynamic routes only seem to be functional when accessed through a RouterLink, but the app crashes whenever I try to directly enter the URL in the browser. (The console error message ...

The button event listener in React fails to trigger without a page refresh

Within my index.html file, I have included the following code snippet: <head> ... <script type="text/javascript" src="https://mysrc.com/something.js&collectorId=f8n0soi9" </script> <script ...