Angular 5 Observable映射到Json数组

时间:2018-05-07 09:42:40

标签: json angular mapping

我的后端回复了这个:

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

3 个答案:

答案 0 :(得分:0)

您可以创建一个新文件,该文件导出模型类,然后将其分配给返回的Observable类型。类似的东西:

new model.ts file

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

import { valuesModel } from 'model';

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

答案 1 :(得分:0)

我不会因为你没有提供示例结果而想到你想要得到什么,

然而试试这个 - 更改行:

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

答案 2 :(得分:0)

请检查此方法,使用 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()方法。

如果你想将输出映射到受尊重的模态,那么请提供相同的格式。所以我可以帮助