SyntaxError: Unexpected token U in JSON at position 0 at JSON.parse in angular8

Question

I just avoided this issue until recently when i was changing up some bits and parts of previous code and noticed this particular error.

I use Angular 8, NodeJS with express and mongoose

whenever i try to pass a specific object or a part of that object i get this error(from chrome console):

HttpErrorResponse {headers: HttpHeaders, status: 201, statusText: "Created", url: "http://localhost:3200/users/", ok: false, …}
error: {error: SyntaxError: Unexpected token U in JSON at position 0 at JSON.parse (<anonymous>) at XMLHtt…, text: "Updated successfully!"}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure during parsing for http://localhost:3200/users/"
name: "HttpErrorResponse"
ok: false
status: 201
statusText: "Created"
url: "http://localhost:3200/users/"
__proto__: HttpResponseBase

this is inside the error object:

message: "Unexpected token U in JSON at position 0"
stack: "SyntaxError: Unexpected token U in JSON at position 0
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:31668:51)
    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3639:35)
    at Object.onInvokeTask (http://localhost:4200/vendor.js:94813:33)
    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3638:40)
    at Zone.runTask (http://localhost:4200/polyfills.js:3407:51)
    at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:3720:38)
    at invokeTask (http://localhost:4200/polyfills.js:4835:18)
    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:4872:25)"

strangely i get a status of 201("Created") with the specified text message for such status("Updated Successfully!").

I'm not 100% sure, but I pressume the error is stemming from the Headers package, while parsing the body, becouse i only get this error from the client side.

these are my NodeJS packages:

"dependencies": {
    "bcrypt": "^3.0.6",
    "body-parse": "^0.1.0",
    "client-sessions": "^0.8.0",
    "connect": "^3.6.6",
    "cookie-parser": "~1.4.4",
    "cors": "^2.8.5",
    "debug": "~2.6.9",
    "dotenv": "^8.0.0",
    "express": "~4.16.1",
    "express-session": "^1.16.1",
    "express-validator": "^5.3.1",
    "http-errors": "~1.6.3",
    "mailgun-js": "^0.22.0",
    "moment": "^2.24.0",
    "mongoose": "^5.6.6",
    "morgan": "~1.9.1",
    "multer": "^1.4.2",
    "nodemon": "^1.19.1",
    "passport": "^0.4.0",
    "pug": "^2.0.4",
    "randomstring": "^1.1.5",
    "session": "^0.1.0",
    "session-mongoose": "^0.5.2",
    "util": "^0.12.1"
  }

These are my Angular packages(don't mind the '*', i had a version issue recently, the versions are the latest stable)

 "dependencies": {
    "@angular/animations": "*",
    "@angular/cdk": "*",
    "@angular/cli": "*",
    "@angular/common": "*",
    "@angular/compiler": "*",
    "@angular/core": "^8.2.4",
    "@angular/forms": "*",
    "@angular/http": "^7.2.15",
    "@angular/material": "^8.1.4",
    "@angular/platform-browser": "*",
    "@angular/platform-browser-dynamic": "*",
    "@angular/router": "*",
    "angular-cc-library": "^1.2.5",
    "angular-moment": "^1.3.0",
    "bootstrap": "^4.3.1",
    "core-js": "^3.2.1",
    "hammerjs": "^2.0.8",
    "moment": "^2.24.0",
    "ng2-search-filter": "^0.5.1",
    "rxjs": "~6.5.2",
    "save": "^2.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.2",
    "@angular/compiler-cli": "^8.2.4",
    "@angular/language-service": "^8.2.4",
    "@types/jasmine": "~3.4.0",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~12.7.3",
    "codelyzer": "^5.1.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.2",
    "ts-node": "~8.3.0",
    "tslint": "~5.19.0"
  }

this is the profile Object that is inside the profile service:

export class Profile {

    public selectedLanguage: number;  //language index
    public designer: string;
    public status: number;
    public Language: any;
    public languages = [
        "EN",
        "LT",
        "RU",
    ]

    constructor() {
    }
}

this is the method i use to update the language index:

 sendLanguage() {
    this.http.put(this.key.key + 'users/', {
      selectedLanguage: this.profile.profile.selectedLanguage
    }, {
      headers: new HttpHeaders({'Content-Type': 'application/json'}),
      withCredentials: true
    }).subscribe(
      res => {
        console.log(res);
        this.profile.LanguageCheck();
      },
      err => {
        console.log(err);
      }
    )
  }

This is the module export that i am calling through the route:

//user updates himself
exports.updateSelf = (req, res) => {
    //validate request
    if(!req.body){
        return res.status(400).send({
            message: "content can not be empty"
        });
    };
    //requesting authorization
    if(!req.session.user){
        return res.status(400).send({
            message: "You are not logged in!"
        });
    }

    User.findOneAndUpdate({_id: req.session.user.userID}, {
        selectedLanguage: req.body.selectedLanguage
    }, { new: true }).then(user => {
        if(!user){
            return res.status(404).send({
                message: "User not found"
            });
        }
        res.status(201).send("Updated successfully!");
    })
    .catch(err => {
        if(err.kind === 'ObjectId'){
            return res.status(404).send({
                message: "User not found"
            });
        }
        return res.status(500).send({
            message: "something went wrong while updating the user"
        });
    });
};

The error in itself isn't much of a problem, as it still saves the data, but it's still bugging me as i cannot find a reason why it is giving me a parsing error.

Answer 1

You have that error because you are sending a string response when your code is expected a json format

res.status(201).send("Updated successfully!");

So you can change your code to something like (send some json data back to the client)

res.status(201).send({message: 'Updated successfully'});