如何更改 JSON 返回的数据？答案

【问题标题】：How to change data returned by JSON?如何更改 JSON 返回的数据？
【发布时间】：2019-11-18 06:38:11
【问题描述】：

我正在使用 OMDB api（在线电影数据库）。我创建了一个返回预期数据类型的接口。通过http get方法请求数据时，返回的数据为：{Search: Array(10), totalResults: "31", Response: "True"}。我需要的数据在搜索数组中。订阅时，我使用 res.Search 访问此信息： subscribe( (res) => { res = this.movieResults = res.Search; 但是错误显示我的界面上不存在搜索。请问我该如何解决？

/* 我的界面 */

export interface SearchInterface {
    Poster: string;
    Title: string;
    Type: string;
    Year: string;
    imdbID: string;
}

导出默认搜索接口；

/* 我的 Service 中的 get 方法 */

searchFilm(name: string): Observable<SearchInterface> {
    return this.http.get<SearchInterface>(this.searchUrl + this.apiKey + '&s=' + name);
  }

/* 订阅我的组件中的 observable */

/* GET request*/
  getData(event) {
    const film = event.target.value;
    this.data.searchFilm(film)
    .subscribe( (res) => {
      /** Sort out res.Search issue */
      res = this.movieResults = res.Search;
      console.log(res);
    });
  }

【问题讨论】：

标签： angular rxjs angular2-observables

【解决方案1】：

这里涉及到两种数据结构：外部一种，由 http 服务返回，您在问题中描述：

interface ActualResponse {
  Search: Array<SearchInterface>;
  totalResults: string;
  Response: string;
}

还有一个你只关心的，用于搜索数组的每个元素：SearchInterface。

您的服务不会转换您从服务器获得的响应。所以它的返回类型不可能是Observable<SearchInterface>：服务器返回一个ActualResponse，所以应该是Observable<ActualResponse>。

但更好的设计，因为您不关心实际响应的其他部分，所以将实际响应转换为您真正关心的内容：Array<SearchInterface>。您可以使用map 运算符来做到这一点：

searchFilm(name: string): Observable<Array<SearchInterface>> {
  return this.http.get<ActualResponse>(this.searchUrl + this.apiKey + '&s=' + name).pipe(
    map(response => response.Search)
  );
}

【讨论】：

【解决方案2】：

@Amitk88 你为什么要导出 SearchInterface 两次 export interface SearchInterface export default SearchInterface;

也不要像这样分配变量 res = this.movieResults = res.Search;

  getData(event) {
    const film = event.target.value;
    this.data.searchFilm(film)
    .subscribe( (res: SearchInterface ) => {
      console.log(res)
    });
  }

检查您收到的回复。我没有将 Search 视为您界面中的键，但您希望在响应中找到 Search。如果您希望 Search 成为响应中的关键，则将其包含在界面下

【讨论】：

感谢您指出这些问题，非常感谢 :-)

【解决方案3】：

因为您的 SearchInterface 包含键

Poster: string;
Title: string;
Type: string;
Year: string;
imdbID: string;

但是您的数据包含密钥

Search: Array(10), 
totalResults: "31", 
Response: "True"

你可以做一件事——

searchFilm(name: string): Observable<any> {
    return this.http.get<any>(this.searchUrl + this.apiKey + '&s=' + name);
  }

和

movieResults: SearchInterface;

【讨论】：

【解决方案4】：

我正在创建一个堆栈闪电战，在这里我们已经有了 3 个答案:)

@JB Nizet 的响应非常优雅，这也是我推荐的。无论如何，这是我的贡献：

// random.service.ts

searchFilm(name: string): Observable<SearchInterface[]> {
    return this.http.get<ServerResponse>(this.searchUrl + this.apiKey + '&s=' + name).pipe(
      map(res => res.Search)
    );
  }

//random.component.ts

getData(event) {
    const film = event.target.value;
    this.searchFilm(film)

    .subscribe( (res) => {
      /** Sort out res.Search issue */
      // res = this.movieResults = res.Search;
      this.movieResults = res;
      console.log(res);
    });
  }

// ramdom.model.ts

export interface SearchInterface {
    Poster: string;
    Title: string;
    Type: string;
    Year: string;
    imdbID: string;
}

export interface ServerResponse 
   {Search: SearchInterface[], totalResults: number, Response: boolean}

et voilà !

【讨论】：

感谢您的回复，非常感谢 :-)