Angular 2. SyntaxError: Unexpected token O in JSON at position 0

Question

When you try to create a new collection in mongoDB, this error falls out:

 EXCEPTION: Unexpected token O in JSON at position 0 ErrorHandler.handleError @ error_handler.js: 54 next @ application_ref.js: 348 schedulerFn @ async.js: 93 SafeSubscriber .__ tryOrUnsub @ Subscriber.js: 234 SafeSubscriber.next Sub Sub::::::: O O O O O O 23 23 233 183 Subscriber._next @ Subscriber.js: 125 Subscriber.next @ Subscriber.js: 89 Subject.next @ Subject.js: 55 EventEmitter. js: 294 ZoneDelegate.handleError @ zone.js: 334 Zone.runTask @ zone.js: 169 ZoneTask.invoke @ zone.js: 416 error_handler.js: 59 ORIGINAL STACKTRACE: ErrorHandler.handleError @ error_handler.js: 59 next @ application_e: .js: 348 schedulerFn @ async.js: 93 SafeSubscriber .__ tryOrUnsub @ Subscriber.js: 234 SafeSubscriber.next @ Subscriber.js: 183 Subscriber._next @ Subscriber.js: 125 Subscriber.next @ Subscriber.js chess.js @ 18 @ Subject.js: 55 EventEmitter.emit @ async.js: 79 NgZone.triggerError @ ng_zone.js: 333 onHandleError @ ng_zone.js: 294 ZoneDelegate.handleError @  zone.js: 334 Zone.runTask @ zone.js: 169 ZoneTask.invoke @ zone.js: 416 error_handler.js: 60 SyntaxError: Unexpected token in JSON at position 0 at JSON.parse () at Response.Body.json (body.js: 24) at MapSubscriber.project (left-bar.service.ts: 18) at MapSubscriber._next (map.js: 77) at MapSubscriber.Subscriber.next (Subscriber.js: 89) at XMLHttpRequest.onLoad (xhr_backend.js: 77) at ZoneDelegate.invokeTask (zone.js: 363) at Object.onInvokeTask (ng_zone.js: 264) at ZoneDelegate.invokeTask (zone.js: 362) at Zone.runTask (zone.js: 166 ) at XMLHttpRequest.ZoneTask.invoke (zone.js: 416)

but still the collection is created!

As I understand. The method .subscribe () receives incorrect data from the service.
Data in which form should the .subscribe () Method take?

-------------------- left-bar.component.ts --------------------

  import {Component, OnInit} from '@ angular / core';
 import {LeftBarService} from '../left-bar.service';

 @Component ({
   selector: 'app-left-bar',
   templateUrl: './left-bar.component.html',
   styleUrls: ['./left-bar.component.sass']
 })
 export class LeftBarComponent implements OnInit {
   categories = [];

   constructor (private leftBarService: LeftBarService) {}

   ngOnInit () {
     this.leftBarService.getAllCategories (). subscribe (category => {
       this.categories = category;
     });
   }

   addCategory (category) {
     let newCategory = {
       name: category
     }
     this.leftBarService.addCategory (newCategory)
       .subscribe (categ => {
         this.categories.push (newCategory);
       });
   }
 }

--------------------------- left-bar-service.ts ---------------- -----

  import {Injectable} from '@ angular / core';
 import {Http} from '@ angular / http';
 import 'rxjs / add / operator / map';

 @Injectable ()
 export class LeftBarService {

   constructor (private http: Http) {}

   // Get all categories
   getAllCategories () {
     return this.http.get ('/ categories')
       .map (res => res.json ());
   }
   // Add category
   addCategory (newCategory) { 
     return this.http.post ('/ categories', newCategory)
       .map (res => res.json ());
   }

 }

@Grundy There Response and neither Request)))) I was mistaken

Answer 1 · 2017-03-09T10:18:16

You send not valid JSON, but for example a string. One solution to the problem will result below. At the same time, regardless of what you send from the server to other components, the expected result will come.

addCategory(newCategory) { return this.http.post('/categories', newCategory) .map(res => { try { return res.json(); } catch (err) { return res; } })

But it is best to revise the server code and send valid JSON . Then the try catch construction is not needed. And you can leave res.json();

json, oddly enough - the usual line, if you don’t parse it, it will remain a line.
"The server, most likely, already sends a JS object" - is that how it is?
Not, the only way the answer can help, to hide the mistakes so that they later got out in another place

Angular 2. SyntaxError: Unexpected token O in JSON at position 0

1 answer 1

More articles: