0

我已经看到这个问题在 Angular 2 中相当普遍，但我没有看到任何对我的特殊情况有帮助的东西。

具体来说，我正在创建一个从 API（需要 API 密钥）中提取数据的应用程序，其中的结果专门采用 XML 格式。我要做的是在用户输入搜索参数时调用 API，让 API 返回结果，然后最终在同一屏幕上显示结果。

但是，我一直遇到相同的“Unexpected token <”错误，错误的来源是 API 本身的 URL。我怀疑问题出在我试图将正文作为 JSON 返回的事实，但我以前从未遇到过这个问题，所以我希望社区能提供帮助！

下面是我的服务和组件代码：

搜索栏.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
          //});;
    }
  }

对于一些额外的细节，查看控制台和网络，我可以看到“类型”被列为脚本，发起者是 http.umd.js，它指向 BrowserJsonp.send（如果这有助于提供任何上下文全部）。

如果您希望我包含任何其他代码片段，请告诉我，我非常感谢您的帮助和指导！

4

1 回答 1

0

您提到结果是 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 解析器来解决这个问题——在这种情况下我会寻找一个 3rd 方库:)

编辑：要清楚，我认为这条线：

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

导致了这个问题，因为它说这个输入 json 响应并将其转换为一个可用的 javascript 对象——但它无法解析它，因为响应是 XML 格式的。

于 2017-01-14T21:55:52.267 回答