How to pass the array values in HTTP POST method

Question

I have the code like this:

empty values getting passing array object. when log the details it's showing fine.

complaint-reg.component.html:

<div class="col-md-6 panel panel-default">
  <h2>Complaint registration</h2>
  <form #complaintRegForm="ngForm" (ngSubmit)="createComplaint(complaintRegForm.value)">
    <div class="form-group">
      <label>District:</label>
      <input type="text" class="form-control" name="District" ngModel>
    </div>
    <div class="form-group">
      <label>Subject:</label>
      <input type="text" class="form-control" name="Subject" ngModel>
    </div>
    <div class="form-group">
      <label>Description:</label>
      <input type="text" class="form-control" name="Description" ngModel>
    </div>
    <div class="form-group">
      <label>Place of occurence:</label>
      <input type="text" class="form-control" name="PlaceOfOccurence" ngModel>
    </div>
    <div class="form-group">
      <label>Name:</label>
      <input type="text" class="form-control" name="Name" ngModel>
    </div>
    <div class="form-group">
      <label>Gender:</label>
      <input type="radio" class="form-control" name="Male" ngModel>Male
      <input type="radio" class="form-control" name="Female" ngModel>Female
    </div>
    <div class="form-group">
      <label>Address:</label>
      <input type="text" class="form-control" name="Address" ngModel>
    </div>
    <div class="form-group">
      <label>Mobile no:</label>
      <input type="number" class="form-control" name="MobileNo" ngModel>
    </div>
    <div class="form-group">
      <label>Email:</label>
      <input type="text" class="form-control" name="Email" ngModel>
    </div>
    <div class="form-group">
      <label>Date of occurence:</label>
      <input type="text" class="form-control" name="DateOfOccurence" ngModel>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

complaint-reg.component.ts:

import { Component, OnInit } from '@angular/core';

import { ComplaintRegistrationService } from './complaint-registration.service';

@Component({
  selector: 'app-complaint-registartion',
  templateUrl: './complaint-registartion.component.html',
  styleUrls: ['./complaint-registartion.component.css'],
  providers:[ComplaintRegistrationService]
})
export class ComplaintRegistartionComponent implements OnInit {

  constructor(private complaintCreation : ComplaintRegistrationService) { }

  ngOnInit() {
  }

  complaintObj = {};
  createComplaint(Obj){
    console.log(Obj);
    this.complaintCreation.createCompliants(Obj).subscribe();
  }

}

and complaint-reg.service.ts:

import { Injectable } from '@angular/core';
import { Http,Response } from '@angular/http';
import 'rxjs/add/operator/map';



@Injectable()

    export class ComplaintRegistrationService{
        private _url:string ="http://192.168.0.106:8000/app/complaint/create"
        constructor(private _http:Http){}
        createCompliants(complaintObj){
            return this._http.post(this._url,complaintObj).map((response:Response)=>console.log(response));
            
        }
    }

passing empty values. Attaching screen

Maybe I'm getting something wrong, but the service logs the response from the server, not the request! What does the service 192.168.0.106:8000/app/complaint/create return? Did you check the request on the server-side? — Dieter Rehbein
– Dieter Rehbein, Commented May 14, 2017 at 13:01
You are logging the response, not the request, so what are you actually receiving in the backend? It seems tho that properties do not match. You have to remember this is case sensitive, so e.g District is not the same as district — AVJT82
– AVJT82, Commented May 14, 2017 at 13:12

AVJT82 · Accepted Answer · 2017-05-14 13:33:05Z

1

First of all, I want to point out, that what you are sending and what you are console logging, is NOT the same. Actually what you are logging what the backend is sending you, not what it has received, so your post request is actually probably sending data, it is just in the "wrong format".

Looking at your console, it seems that the problem is that you are sending the properties with upper camel case, but the backend expects you using lower camel case.

edited May 14, 2017 at 13:33

answered May 14, 2017 at 13:26

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roman C · Accepted Answer · 2017-05-14 13:26:23Z

0

You didn't bind input elements to the ngModel. Add binding to input controls like this

<input type="text" class="form-control" name="District" [(ngModel)]="complaintObj.district" >

when you submit the form complaintObj should not be empty.

answered May 14, 2017 at 13:26

Roman C

1

Collectives™ on Stack Overflow

How to pass the array values in HTTP POST method

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related