Angular 5 Observable映射到Json数组

Question

我的后端返回此：

{
    "FirstResponse": [
        {
            "MyField1": "AAA",
            "MyField2": "AAAAAAA"
        },
        {
            "MyField1": "BBB",
            "MyField2": "BBBBBBB"
        },
        {
            "MyField1": "CCC",
            "MyField2": "CCCCC"
        }
    ],
    "SecondResponse": [
        {
            "FirstName": "FirstNameA",
            "LastName": "LastNameA"
        },
        {
            "FirstName": "FirstNameB",
            "LastName": "LastNameB"
        }
    ]   
}

我想将FirstReponse映射到一个变量，并将SecondResponse到另一个变量。

如何修改以下代码？

search(): Observable<any> {
  let apiURL = `......`;
  return this.http.get(apiURL) 
      .map(res => res.json())
}

更新：例外结果在一个变量中：

[
    {
        "MyField1": "AAA",
        "MyField2": "AAAAAAA"
    },  
    {
        "MyField1": "BBB",
        "MyField2": "BBBBBBB"
    },
    {
        "MyField1": "CCC",
        "MyField2": "CCCCC"
    }
]

一秒钟：

[
    {
        "FirstName": "FirstNameA",
        "LastName": "LastNameA"
    },
    {
        "FirstName": "FirstNameB",
        "LastName": "LastNameB"
    }
]

Answer 1

您可以创建一个新文件，该文件导出模型类，然后将其分配给返回的Observable类型。 就像是：

新的model.ts文件

class FieldModel {
    Field1: string;
    Field1: string;
}
export class valuesModel {
    MyValues: Array<FieldModel>;
}

在service.ts上

import { valuesModel } from 'model';

search(): Observable<valuesModel> {
    let apiURL = `https://jsonplaceholder.typicode.com/users`;
    return this.http.get(apiURL) 
        .map(res => res.json())
}

Answer 2

我不希望您得到什么，因为您没有提供示例结果，

但是尝试一下-更改行：

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

至

.map(res => res.json().MyValues )

使用此方法，您将获得类似问题的顶级数组，例如您在以下问题的评论中提供的链接： https : //jsonplaceholder.typicode.com/users

更新 （问题更新9.10.2018之后）

当前.map(res => res.json())返回具有两个字段（变量）“ FirstResponse”和“ SecondResponse”的对象。 例如，您可以使用它（我从头写代码）：

public async loadData() 
{
   let data  = await this.yourService.search().toPromise();

   let firstVariable = data.FirstResponse;
   let secondVariable = data.SecondResponse;     

   ...
}

因此，正如您在loadData（）中的问题/评论中所描述的那样，您可以根据需要在两个变量中得到结果。

或替代答案-如果您想在search（）内执行此操作，则可以这样进行操作，例如：

search(): Observable<any> {
  let apiURL = `......`;
  return this.http.get(apiURL) 
      .map( (res) => { 
          let data = res.json();
          return {
              firstVariable: data.FirstResponse,
              secondVariable: data.SecondResponse,  
          }
      })
}

Answer 3

请检查此方法，使用import { Http, Response} from '@angular/http'; import { Observable } from 'rxjs/Observable'; import { Http, Response} from '@angular/http'; import { Observable } from 'rxjs/Observable';

public search(){
let apiURL = `https://jsonplaceholder.typicode.com/users`;
return this.http.get(apiURL) 
  .map((res: Response)=> return res.json();)
  .catch((error: Response) => {
        return Observable.throw('Something went wrong');   
  });
}

对于此search()方法，您可以从组件中进行预订。

如果您想将输出映射到受尊重的模态，请提供相同的格式。这样我就可以帮助您