CODEWITHSUNDEEP
angularmongodbhttp-post
Colin Lightfoot
Colin Lightfoot

Reputation: 549

How to post JSON object to server?

I could not find a solution to my problem, but feel free to link me something that could help. This is the complete sign-up.component.ts file.

I am currently using Angular 5 and a Mongo DB, but am very new to using both of them. I am trying to post a JSON object called survey in the sendDataToServer function. to my Mongo DB, but am receiving an error that states Cannot read property 'post' of undefined at Array.SignUpComponent.sendDataToServer. I have been told that Observables instead of promises should be used, but I do not know how to implement that and am open to ideas.

import { Component, OnInit } from '@angular/core';
import { Model, SurveyNG, JsonObject } from 'survey-angular';
import { HttpClient } from '@angular/common/http';
const surveyJSON = { ... } // the JSON object

export class SignUpComponent implements OnInit {

constructor(private http: HttpClient) {}

ngOnInit() {
    const survey = new Model(surveyJSON);
    /*also here, call with this*/
    survey.onComplete.add(this.sendDataToServer);
    SurveyNG.render('surveyElement', { model: survey });
}

    sendDataToServer(survey){
        alert('The results are:' + JSON.stringify(survey.data));
        this.http.post('DATABASE_URL_OMITTED',
        JSON.stringify(survey.data))
        .subscribe(
        (val) => {
          console.log('POST call successful value returned in body',
            val);
        },
        response => {
          console.log('POST call in error', response);
        },
        () => {
          console.log('The POST observable is now completed.');
        });
    }
}

Please help me figure out how to post the JSON object to the database.

Upvotes: 1

Views: 9059

Answers (1)

Roope
Roope

Reputation: 291

Your sendDataToServer function is defined outside of the Component class that you're injecting the http service into, that's why referring to this.http inside that function is not working. The function needs to be inside of your class definition.

@Component({
    selector: 'app-sign-up',
    templateUrl: './sign-up.component.html',
    styleUrls: ['./sign-up.component.css']
})

export class SignUpComponent implements OnInit {

    constructor(private http: HttpClient) {}

    ngOnInit() {
        const survey = new Model(surveyJSON);
        /*also here, call with this*/
        survey.onComplete.add(this.sendDataToServer);
        SurveyNG.render('surveyElement', { model: survey });
    }
    //using arrow method notation makes the `this` keyword behave better
    /*function*/ sendDataToServer=(survey)=>{
        alert('The results are:' + JSON.stringify(survey.data));
        this.http.post('DATABASE_URL_OMITTED',
        JSON.stringify(survey.data))
        .subscribe(
        (val) => {
          console.log('POST call successful value returned in body',
            val);
        },
        response => {
          console.log('POST call in error', response);
        },
        () => {
          console.log('The POST observable is now completed.');
        });
    }

}

Upvotes: 2

Related Questions