I've set up a basic local API that focuses solely on handling post requests. I'm currently attempting to integrate this post request into my Angular application, but the results are rather puzzling. It seems like there's a misstep on my end, causing the app to not return the expected outcome. Below is the code snippet:
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><code>proxy.config.jsonfile:{ "/parentheses":{ "target": "http://localhost:3000", "secure": false, "logLevel1": "debug" } }4/ The API in question is essentially 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/ The JavaScript function being referenced:
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 issue: The return I'm getting is quite perplexing, as it only flashes for a split second:
{ *_isScalar*: false, *source*: { *_isScalar*: false, *source*: { etc..Deciphering this output has proven to be a challenge for me.