values.join is not a function in the file http.es5.js Angular 4

Question

In angular 4 I have used a code snippet like;

let h = [{Content: 'application/json'}];

this.http.post(server, this.userDataObj, {headers: h}).....

So basically I wanted to add a header in my ajax call.

Now I am constantly getting an error

ERROR TypeError: values.join is not a function

I inspected the error location and I found at the file http.es5.js there is a code like;

 req.headers.forEach(function (name, values) {
      return xhr.setRequestHeader(name, values.join(',')); 
 });

Now I added a console.log(req.headers) just above the snippet, and I got ;

 [Object]
      0:Object
         Content: 'application/json'

Now as far as I know function inside forEach loop on array in JS takes second argument(which is values in http.es5.js) is the index of the element. And I tested via console.log(values) and I got result 0. So it is natural that values.join is not a function, and it will never be a function on an integer.

I tried ;

var headers = new Headers();
headers.append("Content", 'application/json');

this.http.post(server, this.userDataObj, {headers: headers}).subscribe(.....

Which also giving me same error.

Tried this;

var h = new Headers();
h.append("kkk", 'aaa');
let options = new RequestOptions({ headers: h });

this.http.post(server, this.userDataObj, options).subscribe(.....

Still same error.

Is it a bug? Or am I doing any mistake? Any idea will be very helpful for me.

PS: I am new to Angular4.

Headers aren't an array. They are ```RequestOptions``` object. This SO question should help https://stackoverflow.com/questions/41133705/how-to-correctly-set-http-request-header-in-angular-2 — Wainage, Aug 01 '17 at 04:28
I tried the your mentioned question's accepted answer, still same error. What I tried mention in the question now.Please check. I become clueless now. :( — KOUSIK MANDAL, Aug 01 '17 at 04:34

score 6 · Answer 1 · answered Aug 09 '17 at 13:46

6

Angular 4.3:

import {HttpClient, HttpHeaders} from '@angular/common/http';

answered Aug 09 '17 at 13:46

teejay

2,353
2
27
36

Create Headers as ... new HttpHeaders({ 'Content-Type': 'application/json', 'content-language': 'en' }) . .. – Lokinder Singh Chauhan Oct 26 '17 at 06:00

score 1 · Answer 2 · edited Nov 22 '17 at 09:03

1

You need to use Headers from angular/http to add the headers to the request.

first use those imports

import { Http, Headers} from '@angular/http';

then add the headers like this

var headers = new Headers();

headers.append("Content", 'application/json');

this.http.post(server, this.userDataObj, {headers: headers })

edited Nov 22 '17 at 09:03

teejay

2,353
2
27
36

answered Aug 01 '17 at 04:14

Sachila Ranawaka

39,756
7
56
80

I tried it also,and tried just now.Still same error I am getting. – KOUSIK MANDAL Aug 01 '17 at 04:19

Nirav Tikadiya · Answer 3 · 2017-11-13T08:58:08.290

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Api } from '../../providers/providers';


export class demo{

  response: any;     

  constructor(public api: Api){
     this.apiCall();
  }
  apiCall(){
     var headers = new HttpHeaders({
     'Content-Type': 'application/json',
     'token': 'token_demo'
      });

      this.response = this.api.post("services/user", {}, { headers: headers });
      this.response.subscribe((data) => {
        console.log('data : ' + data);
      }, err => {
        console.error("error = ", err);
      }
  }
}

this is working on ........

values.join is not a function in the file http.es5.js Angular 4

3 Answers3

Linked