语法错误:JSON中位置0 MEAN APP中的意外令牌<

时间:2019-07-26 20:19:49

标签: json angular express heroku mean-stack

我试图从后端获取数据,但弹出一个我不理解的错误

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.onLoad (https://angulartest-frontend.herokuapp.com/vendor.js:13378:51)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (https://angulartest-frontend.herokuapp.com/polyfills.js:2781:31)
    at Object.onInvokeTask (https://angulartest-frontend.herokuapp.com/vendor.js:58822:33)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (https://angulartest-frontend.herokuapp.com/polyfills.js:2780:60)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (https://angulartest-frontend.herokuapp.com/polyfills.js:2553:47)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (https://angulartest-frontend.herokuapp.com/polyfills.js:2856:34)
    at invokeTask (https://angulartest-frontend.herokuapp.com/polyfills.js:4102:14)
    at XMLHttpRequest.globalZoneAwareCallback (https://angulartest-frontend.herokuapp.com/polyfills.js:4139:21)

这是我的服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Subject } from 'rxjs';
import { map } from 'rxjs/operators';

import { AuthenticationService } from './auth.service';

import { ITransfer } from '../model/transfer.model';

import { environment } from '../../environments/environment';

const BACKEND_URL_transfer = environment.apiUrl + '/transfer';

@Injectable({ providedIn: 'root' })
export class TransferRecordService {

  private transferRecordList: ITransfer[] = [];
  private transferRecordListObserver = new Subject<{ transferRecordList: ITransfer[], success: boolean, message: string }>();

  constructor(private http: HttpClient, private authService: AuthenticationService) { }

  getTransferRecordList() {
    this.http
      .get<{ success: boolean, message: string, transferRecordList: any }>(BACKEND_URL_transfer + '/getTransferRecordList')
      .pipe(map((fetchedTransferRecordList) => {
        return {
          extractedTransferRecordList: fetchedTransferRecordList.transferRecordList.map((transfer: any) => {
            return {
              transferId: transfer._id,
              transferID: transfer.transferID,
              transferDescription: transfer.transferDescription,
              transferFromLocation: transfer.transferFromLocation,
              transferToLocation: transfer.transferToLocation,
              transferDate: transfer.transferDate,
              transferNumberOfItems: transfer.transferNumberOfItems,
            };
          }),
          success: fetchedTransferRecordList.success,
          message: fetchedTransferRecordList.message
        };
      }))
      .subscribe((mapped) => {
        console.log(mapped);
        this.transferRecordList = mapped.extractedTransferRecordList;
        this.transferRecordListObserver.next({
          transferRecordList: [...this.transferRecordList],
          success: mapped.success,
          message: mapped.message
        });
      });
  }

  getTransferRecordListListener() {
    return this.transferRecordListObserver.asObservable();
  }
}

这是我的组成部分

import { Component, OnInit, OnDestroy, ViewEncapsulation  } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder } from '@angular/forms';
import { InventoryService } from '../../service/inventory.service';
import { IItem } from '../../model/item.model';
import { Subscription } from 'rxjs';
import { TransferRecordService } from '../../service/transfer-record.service';
import { ITransfer } from '../../model/transfer.model';

@Component({
  selector: 'app-transfer',
  templateUrl: './transfer.component.html',
  styleUrls: ['./transfer.component.scss'],
  encapsulation: ViewEncapsulation.None

})
export class TransferComponent implements OnInit, OnDestroy {

  showTransferForm = false;

  transferForm: FormGroup;

  public itemList: IItem[] = [];
  private itemListHolder = [];
  private itemListSubscription: Subscription;
  public showItems = false;
  public transferRecordList: ITransfer[] = [];
  private transferRecordListSubscription: Subscription;

  locationList = [
     'Location 1','Location 2','Location 3' 
  ];
  private locationDefault:string = "Select Location"

  constructor(
    private fb: FormBuilder,
    private router: Router,
    private transferService: TransferRecordService,
    private inventoryService: InventoryService
  ) { }

  ngOnInit() {
    this.transferService.getTransferRecordList();
    this.transferRecordListSubscription = this.transferService
      .getTransferRecordListListener()
      .subscribe((data: { transferRecordList: ITransfer[], success: boolean, message: string }) => {
          this.transferRecordList = data.transferRecordList;
          if (!data.success) {
            // error message
            console.log('Error!');
            console.log(data.message);
          } else {
            // alert success
            console.log('Success!');
            console.log(data.transferRecordList);
            console.log(data.message);
          }
      });

  }

  onShowTransferForm() {
    if (this.showTransferForm === false) {
      this.showTransferForm = true;
      this.itemList=[];
      this.itemListHolder=[];
      this.showItems = false;
      console.log(this.itemListHolder)
      this.inventoryService.getInventoryList('inventory');

      this.itemListSubscription = this.inventoryService
        .getInventoryListListener()
        .subscribe((data: { inventoryList: any[], success: boolean, message: string }) => {
            this.itemList = data.inventoryList;
            if (!data.success) {
              // error message
              console.log('Error!');
              console.log(data.message);
            } else {
              // alert success
              console.log('Success!');
              console.log(data.inventoryList);
              for (let i = 0; i < this.itemList.length; i++) {

                this.itemListHolder.push(this.itemList[i].itemName);

              }
              console.log(this.itemListHolder)
              if (this.itemListHolder != null) {
                this.showItems = true;
              }
            }
        });

      this.transferForm = this.fb.group({
        selectedTransferLocation: [this.locationDefault],
        inputDetails: [''],
        inputTransferDate: [''],
        selectedItem:[''],
      });
    } else {
      this.showTransferForm = false;
      this.itemListSubscription ? this.itemListSubscription.unsubscribe() : '';
    }
  }

  onSearchChange() {

  }

  onUpdateItemData() {

  }

  ngOnDestroy() {
    this.transferRecordListSubscription.unsubscribe();
    this.itemListSubscription ? this.itemListSubscription.unsubscribe() : '';
  }
}

我尝试搜索一些答案,但找不到解决方法

我有些类似的问题,但这是由于JSON.parse之类的原因,但我不使用它。任何人都可以澄清或帮助我解决问题

0 个答案:

没有答案