我试图从后端获取数据,但弹出一个我不理解的错误
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之类的原因,但我不使用它。任何人都可以澄清或帮助我解决问题