Angular 5 Observable 映射到 Json 数组答案

【问题标题】：Angular 5 Observable mapping to Json arrayAngular 5 Observable 映射到 Json 数组
【发布时间】：2018-10-17 01:58:58
【问题描述】：

我的后端返回这个：

{
    "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"
    }
]

【问题讨论】：

我会说，您的后端应该简单地返回您实际想要获取的值。还是您的示例中的数据对您来说很重要？
你想要得到的确切结果是什么（给出正确的 json）？
你试过了吗？：search(): Observable<{ "Field1": string, "Field2": string }[]> { const apiURL = 'https://jsonplaceholder.typicode.com/users'; return this.http.get(apiURL) .map(res => res.json().MyValues) }
@KamilKiełczewski 与 jsonplaceholder.typicode.com/users 相同，但内容位于“MyValues”节点下。
老哥请提供预期结果和目前得到的结果，以便我们更好地帮助您。

标签： json angular mapping

【解决方案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())
}

【讨论】：

问题不在于 jsonplaceholder 而在于我的 WebApi 的结果
@Kris-I 你得到什么回应？可以给个样品吗？
@PrateekGogia 我只想要一个具有“MyValue”节点下的值的 Json

【解决方案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() 中的问题/cmets 中描述的那样，您会根据需要得到两个变量。

或替代答案 - 如果您想在 search() 中执行此操作，那么您可以通过以下方式执行此操作，例如：

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

【讨论】：

@Kris-I 你还没有提供你想要的示例输出（json？）
@Kris-I 考虑到您的评论和问题更新，我更新了我的答案。

【解决方案3】：

请检查这种方法，使用 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() 方法，您可以从您的组件中订阅。

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

【讨论】：

从不导入 rxjs/Rx
因为它会导入整个 rxjs，这会大大增加你的包的大小...github.com/angular/angular/issues/20349
但是无论我提供什么解决方案来映射输出数据，它都是正确的。他没有提到性能。