使用IMDB api会导致错误的json_Json_Angular_Typescript_Imdb

使用IMDB api会导致错误的json

json angular typescript

使用IMDB api会导致错误的json,json,angular,typescript,imdb,Json,Angular,Typescript,Imdb,我有一个使用IMDB api的简单程序，我得到了结果，但它显示为错误，因为结果不是结构化json 电影服务 export class MovieService { constructor(private http:HttpClient) { } getMovie(movie:string){ return this.http.get(this.generateURL(movie)); } private generateURL(movie:string){ ret

我有一个使用IMDB api的简单程序，我得到了结果，但它显示为错误，因为结果不是结构化json

电影服务

export class MovieService {
  constructor(private http:HttpClient) { }
  getMovie(movie:string){
    return this.http.get(this.generateURL(movie));
  }
  private generateURL(movie:string){
    return "https://v2.sg.media-imdb.com/suggests/titles/"+movie.charAt(0)+"/"+movie+".json?callback=imdb$"+movie;
  }
}

addmovie.component.ts

   private _filterMovies(value: string) {
    this.movieService.getMovie(value).subscribe(
      movies => {
        console.log(movies);
        return movies;
      }
    );
  }

  ngOnInit() {
    this.addMovieForm.get('movie').valueChanges.subscribe(val => {
      this._filterMovies(val)
    });
  }

我犯了这样的错误

响应是错误的json。如何在收到json时格式化json？如何解决这个问题？任何线索都会有帮助。

结果不是

JSON

，而是。它本质上是返回一个脚本，该脚本试图执行指定的回调方法

您应该调用

http.jsonp（url，“imbdIgnoresThisParam”）

，而不是

http.get（）

但是，

回调

查询字符串参数被IMDB忽略。答案建议动态创建预期的回调函数，其名称包含您正在搜索的标题。在这个回调中，你可以做一些不同的事情

使用闭包在您的

MovieService

中调用/设置某些内容。这将导致对API的调用抛出错误，因为Angular框架的回调不会按预期调用。你可以忽略这个错误

尝试调用预期的角度回调，

ng\u jsonp\u回调

。这将阻止API调用抛出，但可能不可靠。回调名称是动态的，并且随着每次调用而递增。您可以尝试跟踪应用程序中的

jsonp（）

调用数。当然，这个框架可能会改变并打破这个解决方案。对

getMovie（）

的并发调用可能会中断，因为下一个调用可能会在窗口的上一个回调上进行。小心使用在typescript中，您的

getMovie（）

函数和相关帮助程序可能如下所示：

private imdbData: any = null;
private jsonpIdx = 0;

private setImdb(json: any) {
    this.imdbData = json;
    // or do whatever you need with this
}

getMovie(movie:string) {
    // dynamically create the callback on the window.
    let funcName = `imdb$${movie}`;
    window[funcName] = (json: any) => {
        // use the closure
        this.setImdbData(json);

        // or try to call the callback that Angular is expecting.
        window[`ng_jsonp_callback_${this.jsonpIdx++}`](json);
    }

    // go get your data!
    let url = this.generateURL(movie)
    return this.http.jsonp(url, "ignored").subscribe((json) => {
        // this happens if you successfully trigger the angular callback
        console.log(json);
    }, (err) => {
        // this happens if the angular callback isn't called
        console.log(this.imdbData); // set in closure!
    });
}

编辑角度4

对于

angular4

，您似乎需要将

JsonpModule

与

HttpModule

一起导入。然后，将

jsonp

注入服务，就像将

http

注入服务一样。对IMDB的调用变成了

this.jsop.request（url）.subscribe（…）

，您的动态回调名称也需要更改

window[funcName] = (json: any) => {
    // or try to call the callback that Angular is expecting.
    window["__ng_jsonp__"][`__req${this.jsonpIdx++}`]["finished"](json);
}

我没有立即设置Angular 5或6项目，所以很难说这些版本中的回调是否有任何差异

有点像黑客，但希望能有所帮助