Question

Angular / JavaScript业余爱好者，使用此框架处理我的第一个项目。我有一个使用服务的组件，它对给定的URL执行GET请求。

组件：

@Component({
    selector: 'jive-list',
    templateUrl: './jivelist.component.html',
    styleUrls: ['./jivelist.component.css']
})
export class JiveListComponent implements OnInit {
    JiveLists: String[]; //placeholder

    constructor(private JiveListService: JiveListService) { }

    getJiveList(): void {
        console.log("test");
        this.JiveListService.getData().subscribe(
            data => console.log(JSON.stringify(data)));
    }

    ngOnInit() {
        this.getJiveList();
        //console.log(this.JiveLists) //placeholder
    }
}

服务：

@Injectable()
export class JiveListService {
    API_URL = environment.JIVEAPIURL //can append endpoints where needed

    constructor (public http: HttpClient) {
        console.log("constructor runs");
    }

    getData(): Observable<any> {
        return this.http.get<any>(this.API_URL).map((res) => res);
    }

}

API网址目前是一个本地文件，位于＆＃39; ./ assets / data / data.json＆＃39;

此代码基本上从URL获取JSON并将其记录在控制台中。当文件纯粹是JSON时，这没有问题。但是，将在生产中提供的JSON始终以字符串开头。

JSON示例：

throw 'allowIllegalResourceCall is false.';
{
  "id" : "123456",
  "resources" : {
   //rest of the JSON

我尝试了推荐的两个解决方案in this article，但没有一个改变了我的结果。

示例（尝试）解决方案：

getData(): Observable<any> {
        return this.http.get<any>(this.API_URL).map((res) => res.substring(res.indexOf('{')));
    }

我的错误讯息：

SyntaxError: Unexpected token h in JSON at position 1 at Object.parse (<anonymous>) at XMLHttpRequest.onLoad (http://localhost:4200/vendor.bundle.js:43048:37) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2513:31) at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:75481:33) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2512:36) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.bundle.js:2280:47) at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.bundle.js:2587:34) at invokeTask (http://localhost:4200/polyfills.bundle.js:3628:14) at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.bundle.js:3654:17)

任何有助于我解决此问题的想法都将受到赞赏。我正在使用Angular 4.2.4，并使用@ Angular / common / HttpClientModule作为我的HTTP处理程序。

Answer 1

那你可以试试吗，

服务中的getData()方法，

getData(): Observable<any> {
   return this.http.get<any>(this.API_URL);
}

组件中的getJiveList()

getJiveList(): void {
   console.log("test");
   this.JiveListService.getData()
      .subscribe(data => {
         data = data.toString().substring(data.toString().indexOf('{'));
         console.log(data);
      });
}

如果这不起作用，那么可能是因为我们解析了GET请求中的数据。

Answer 2

发现该问题来自xp := v的{{1}}方法，如果请求的网址以{{{{}结尾，则会自动在响应上运行HttpClientModule 1}}。我无法在前端找到一个简单的修复程序，而是提到了一个Spring API，它将重定向我的请求并使用修改后的JSON解析方法来修剪文件中的字符串。

修剪来自HTTP JSON响应的文本

2 个答案: