角2 Uncaught SyntaxError：予期しないトークン<

Question

この問題はAngular 2ではかなり一般的ですが、私の特定の状況に役立つものは何も見ていません。

具体的には、結果が特にXML形式のAPI（APIキーが必要）からデータを取得するアプリを作成しています。私がしようとしているのは、ユーザーが検索パラメータを入力したときに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として表示されていることがわかりますスクリプトとイニシエータは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はリテラルからJSONが使用できる型付きオブジェクトにマップされることを期待していると思います。

問題は、xmlをjsonとして解析しようとしていることです。つまり、最初の "<"を解析できないというエラーです。これは有効なjsonではないためです。

あなたはおそらくこれを解決するためにXMLパーサのいくつかの並べ替えが必要になります - 私はこのケースでサードパーティのライブラリを探します:)

EDIT：明確にするために、私はラインを考える：

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

は、この入力jsonレスポンスを受け取り、使用可能なjavascriptオブジェクトに変換すると言いますが、レスポンスはXML形式であるため、解析できません。