Angular CLI post request to localhost:3000 not working, maybe a problem with my Proxy configuration

Question

I have created a basic local API that only deals with a post request. I am trying to implement that post request on my angular application, but it is returning some weird stuff. There is obviously something I am not doing right. I have reasons to believe that the app is reaching the API, but it's not returning what I expect. Here is my code:

1/app.component.html

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Welcome to the parentheses balance checker';
  result;
  test = "hello";

  constructor(private http: HttpClient) {}

    onSubmit(textEnter: string) {
      let json = { "string": textEnter };
      console.log(json);
      this.result = this.http.post('http://localhost:3000/parentheses/', json);
    }
}

2/ app.components.ts

<div>
  <form>
     <input #textEnter placeholder="text">
     <button type="submit" (click)="onSubmit(textEnter.value)">click here</button>
  </form>

  <pre>
    {{ (result | json }}
  </pre>

</div>

3/ The proxy.config.json file:

{
  "/parentheses":{
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel1": "debug"
  }
}

4/ The API I am trying to reach is basically a parentheses checker:

const parenthesesChecker = require('./checker.js');

const express = require('express'), bodyParser = require('body-parser');
const router = express.Router();

router.use(bodyParser.json());

router.post('/', (req, res, next) => {
  const stringCheck = ({
    string: req.body
  });
  if (parenthesesChecker(stringCheck.string.string).result === true) {
    res.status(200).json({
      "isValid": true
    });
  } else {
    res.status(400).json({
      "isValid": false,
      "errorDetails": {
          "preceedingParentheses": `${parenthesesChecker(stringCheck.string.string).preceeding}`,
          "erroneosParentheses": `${parenthesesChecker(stringCheck.string.string).erroneos}`
      }
    });
  };
});

module.exports = router;

5/ Javascript function it is referring to:

module.exports = function (string) {
  const openArray = ["(", "[", "{", "<"];
  const closeArray = [")", "]", "}", ">"];
  let i = 0, parOpen = 0, openingPar= "", closingPar = [], erroneos = "";
  for(i; i < string.length; i++) {
    if (openArray.includes(string[i])) {
      openingPar += string[i];
      parOpen++;
      closingPar.push(closeArray[openArray.indexOf(string[i])]);
    }
    if (closeArray.includes(string[i])) {
      let erroneos = string[i];
      parOpen--;
      if (string[i] === closingPar[closingPar.length - 1]) {
        closingPar.pop();
      } else {
        return { result: false, preceeding: openingPar, erroneos: erroneos };
      };
    };
    if (parOpen < 0) return { result: false, preceeding: openingPar, erroneos: erroneos };
  }
  return { result: (parOpen === 0 ? true : false), preceeding: openingPar, erroneos: erroneos };
};

My problem: I get in return something like that, and it only displays a fraction of a second:

  {
*_isScalar*: false,
  *source*: {
    *_isScalar*: false,
    *source*: {
etc..

I don't know how to interpret that.

What API? What does it return to other clients? What did you expect instead? — jonrsharpe, Jul 05 '20 at 13:17
You are showing JSON of *the observable*. I'd strongly recommend running through https://angular.io/tutorial, and reading the canonical https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call to understand the underlying problem. Also *use* TypeScript - if `result` had an appropriate type the compiler could tell you that doesn't make sense. — jonrsharpe, Jul 05 '20 at 13:34
I am very new to all this, so I am a bit lost. I am going to go through the documentation your are suggesting. Thanks! — Olivier Girardot, Jul 05 '20 at 13:42

score 1 · Answer 1 · edited Jul 09 '20 at 22:40

Whenever trying to reach something from network, using http will return an observable. Therefore you need to subscribe to that observable to be able to read the data when it becomes available:

So your code is this:

  this.result = this.http.post('http://localhost:3000/parentheses/', json);

But it should be this:

  this.http.post('http://localhost:3000/parentheses/', json).subscribe((data) => {
    this.result = data;
    console.log(this.result);
 });

Some references: observable

You can use async pipe in your html instead of the subscription, either. Like:

<div>
  <form>
     <input #textEnter placeholder="text">
     <button type="submit" (click)="onSubmit(textEnter.value)">click here</button>
  </form>

  <pre>
    {{ result | async | json }}
  </pre>

</div>

Angular CLI post request to localhost:3000 not working, maybe a problem with my Proxy configuration

1 Answers1