I'm new to Angular 2 and currently I'm trying to write a small web application and I'm kinda stuck. I need to do a post request and I have the following Python Code (I replaced the parameters here, but it works perfectly fine):
import requests
url = "https://somerandomlink.wasd"
payload = "{\n \"var1\":{\n \"var1Text\" : \"parameter\"\n }\n}"
headers = {
'authorization': "Basic somethingsomethinghidden",
'x-synctimeout': "30",
'accept': "application/json",
'cache-control': "no-cache",
'content-type': "application/json"
}
response = requests.request("POST", url, data=payload, headers=headers)
print(response.text)
I want to do the same thing with Angular 2, but for some reason my Angular 2 code doesn't work:
import {Component, enableProdMode, Injectable, OnInit} from '@angular/core';
import {Http, Headers, HTTP_PROVIDERS, URLSearchParams} from '@angular/http';
import "rxjs/add/operator/map";
@Injectable()
class HTTPService{
constructor (private http: Http) {}
test(){
var params = JSON.stringify({ var1: { var1Text: 'parameter' } });
var headers = new Headers();
headers.append('Authorization','Basic somethingsomethinghidden');
headers.append('X-SyncTimeout','30');
headers.append('Accept','application/json');
headers.append('Cache-Control','no-cache');
headers.append('Content-Type','application/json');
return this.http.post('https://somerandomlink.wasd',params,{headers: headers})
}
}
@Component({
selector: 'home',
templateUrl: 'app/html/some.component.html',
providers: [HTTP_PROVIDERS, HTTPService]
})
export class someComponent {
question = '';
view_question = '';
view_answer = '';
constructor(private httpService: HTTPService){}
eventHandler(key) {
if (key==13){
this.view_question = this.question;
this.reqAns(this.question);
this.question = '';
}
}
reqAns(question){
if (question == ''){
return ''
}else{
this.httpService.test().map(res => res.json()).subscribe(
data => this.view_answer = "DATA block: " + JSON.stringify(data),
error => this.view_answer = "ERROR block: " + JSON.stringify(error),
() => console.log('finished')
);
}
}
}
It produces the following output:
ERROR block: {"_body":{"isTrusted":true},"status":200,"ok":true,"statusText":"Ok","headers":{},"type":3,"url":null}
I would really appreciate if someone could help me. There shouldn't be a syntax error, since I've tried with another post request based on a video tutorial (an easier one, with an urlencoded form) and it worked. So the problem must be something else, though I have no idea what.
Additional information:
Info A:
The following method, which was, as I mentioned, based on a video tutorial works and produces the expected output:
postJSON_tutorial(){
var json = JSON.stringify({var1: 'test', var2: 3, var3: "asdas"});
var params = 'json=' + json;
var headers = new Headers();
headers.append('Content-Type','application/x-www-form-urlencoded');
return this.http.post('http://validate.jsontest.com',params,{headers: headers})
}
with the following correct output
DATA block: {"object_or_array":"object","empty":false,"parse_time_nanoseconds":116419,"validate":true,"size":3}
Info B:
Since someone asked for the version, here's the whole package.json
{
"name": "webapp",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.9",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^0.8.1"
}
}