2

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"
  }
}
Broccoli
  • 33
  • 1
  • 1
  • 5

0 Answers0