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

843
09 марта 2017, 23:29

При попытке создания новой коллекции в mongoDB, вываливается вот такая вот ошибка:

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 @ Subscriber.js:183
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ 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:59 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:59
next @ application_ref.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:89
Subject.next @ 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 O 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)

но всё же коллекция создается!


Как я понял Метод .subscribe() получает некорректные данные от сервиса.
Данные в каком виде должен принимать Метод .subscribe()?

--------------------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());
  }
}



Answer 1

Ты высылаешь не валидный JSON, а к примеру строку. Один из вариантов решения проблемы приведет ниже. При этом независимо от того, что вы отправите с сервера в другие компоненты придет ожидаемый результат.

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

Но лучше всего пересмотреть серверный код и высылать валидный JSON. Тогда конструкция try catch не понадобится. И можно будет оставить res.json();

READ ALSO
NPM и deploy по ftp

NPM и deploy по ftp

Всем доброго времени суток! Делаю веб-приложение на Angular 2Захотелось автоматизировать deploy по ftp

399
Как вернуть назад аттрибут класса

Как вернуть назад аттрибут класса

Верхняя часть рабочая, нижняя в принципе тоже, но при помощи $("main-menu a")

335
Как поставить в очередь?

Как поставить в очередь?

Описание работы слайдера: слайдер меняет по 5 фотографий при клике, и записывает 5 фотографий в буфер, чтобы при следующем клике заменяет предыдущие...

269