Angular 2 Uncaught語法錯誤：意外令牌<

Question

我已經看到，這個問題在Angular 2中相當常見，但我沒有看到任何有助於我特殊情況的東西。

具體來說，我創建了一個從API（需要API密鑰）提取數據的應用程序，其中結果是專門以XML格式顯示的。我想要做的是在用戶輸入搜索參數時調用API，使API返回結果，然後最終在同一屏幕上顯示結果。

但是，我一直遇到相同的「意外的令牌<」錯誤，其中錯誤的來源位於API本身的URL上。我懷疑這個問題是由於我試圖以JSON身份返回身體的事實產生的，但是我之前從未遇到過這個問題，所以我希望社區能夠提供幫助！

這裏是我的服務和組件如下代碼：

搜索bar.component.ts

import { Component, Output, Input, EventEmitter } from '@angular/core'; 
import { NgForm } from '@angular/forms'; 
import { NgModel } from '@angular/forms'; 
import { Observable } from 'rxjs/Observable'; 

import { Search } from './search'; 
import { ZillowSearchService } from './zillow-search.service'; 


@Component({ 
    moduleId: module.id, 
    selector: 'search-bar', 
    templateUrl: `search-bar.component.html`, 
    styles: [ 
     `input { 
      width: 50%; 
      margin-left: 25%; 
      margin-top: 15%; 
      color: black; 
      height: 40px; 
     } 
     button { 
      border-radius: 5px; 
      margin-top: 5%; 
      margin-left: 45%; 
     } 
     ` 
    ] 
}) 
export class SearchBarComponent { 
    getSearchResults: string; 
    model = new Search(""); 
    constructor(private zillowSearchService: ZillowSearchService) {} 
    private sub: any; 
    public state: string = "" ; 
    data: string; 

    onSubmit(){ 
     this.zillowSearchService.searchZillow("New Mexico") 
       .subscribe(
       data => console.log(data), 
       error => console.log("Error: " + error) 
       ); 
    } 
} 

Zillow的-search.service.ts：

import { Inject, Injectable } from '@angular/core'; 
import { Http, Headers, Response, Jsonp } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import '../rxjs-operators'; 

import { AppConfig } from './app-config'; 
import { Search } from './search'; 

let api = AppConfig.baseUrls.api; 
let url = AppConfig.baseUrls.base; 

@Injectable() 
export class ZillowSearchService { 
    public state: string; 
    constructor (@Inject(Jsonp) private jsonp: Jsonp) { 
    //this.http = http; 
    } 
    protected results: any; 

    searchZillow(statevar: any) { 
    console.log("Before" + statevar); 
    var queryString = url + `?zws-id=${api}&state=${statevar}&callback=JSONP_CALLBACK`; 

    return this.jsonp 
      .get(queryString, new Headers({ "Content-type": 
"application/xml", "Accept": "application/xml", 
      "Access-Control-Allow-Origin": "*" })) 
      .map((res: Response) => res.json()) 
      //.map(res => console.log("TEST")); 
      //.map((res) => { 
      //return 
      //});; 
    } 
    } 

對於一些額外的細節，調查控制檯和網絡，我可以看到，「類型」被列爲sc ript，發起者是http.umd.js，它指向了BrowserJsonp.send（如果這有助於提供者任何上下文）。

讓我知道你是否希望我包含任何額外的代碼片段，我真的很感謝幫助和指導！

Answer 1

你提到的結果是XML格式的，但我看到這個代碼爲您服務的底部：

return this.jsonp 
     .get(queryString, new Headers({ "Content-type": 
     "application/xml", "Accept": "application/xml", 
     "Access-Control-Allow-Origin": "*" })) 
     .map((res: Response) => res.json()) 
     //.map(res => console.log("TEST")); 
     //.map((res) => { 
     //return 
     //});; 
} 

我不能確定是否能映射響應JSON這樣 - - 我認爲它實際上期望從字面上看到JSON，它將映射到可以使用的類型化對象。

所以問題是，你試圖解析XML爲JSON - 因此錯誤說它不能解析第一個「<」，因爲這是無效的JSON。

你可能需要某種形式的XML解析器來解決這一點 - 我會找一個第三方庫在這種情況下:)

編輯：要清楚，我覺得行：

.map((res: Response) => res.json()) 

正在引發這個問題，因爲它說這個輸入json響應並將其轉換爲可用的JavaScript對象 - 但無法解析它，因爲響應採用XML格式。