Rxjs 将 Json 文档中的数组映射到新的数组类型 [英] Rxjs Map Array in Json Document to new Array type

问题描述

我正在 Angular 服务中从 PouchDB 检索文档.以下列格式检索文档:

<代码>{"_id":"段","_rev":"1-4f0ed65cde23fe724db13bea1ae3bb13",段":[{ "name":"航空航天" },{ "name":"汽车维修" },{名称":商业"}，{ "name":"教育" },{名称":能量"}，{名称":农场/牧场"}，{名称":家具"}，{ "name":"重型设备" },{ "name":"业余爱好者" },{名称":基础设施"}，{ "name":"豪华/休闲" },{ "name":"军事" },{ "name":"MUP" },{名称":处理中"}，{名称":铁路"}，{名称":交通"}]}

我想把它映射到一个新的数组，看起来像:

<预><代码>[{ value: "航空航天", viewValue: "航空航天" },{ value: "Auto Repair", viewValue: "Auto Repair" },{ 值:商业"，视图值:商业"}...]

为了实现这一点，我在我的服务中尝试了以下代码:

getSegments(): Observable{从(this.database.get('segments'))返回.管道(地图((结果)=> 结果.segments));}

我像这样转换组件中的数组:

segments: SegmentsLookup[] = [];...this.lookupDbService.getSegments().订阅(数据=> {data.forEach(元素 => {this.segments.push({value: element.name, viewValue: element.name});});});

这有效，但我知道有一种方法可以将其正确映射回服务代码.此外，当这样做时，编译器会抱怨results.segments"，指出类型{}"上不存在属性segments".

如何将检索到的数据映射到服务的getSegments"方法中所需的数组?

解决方案

你可以做的转换是2个步骤:

• pipe/map 提取片段
• array/map 转换为最终的数据类型

请在此处查看示例:https://stackblitz.com/edit/angular-ikb2eg?file=src%2Fapp%2Fapp.component.ts

让transformedData = observableData.pipe(地图(数据=> {控制台日志(数据，数据段.长度)；返回 data.segments.map(element => {return { value: element["name"], viewValue: element["name"] };});}));转换数据.订阅(数据 => {this.mylist = 数据；});

I am retrieving a document from PouchDB in an Angular Service. The document is retrieved in the following format:

{
"_id":"segments",
"_rev":"1-4f0ed65cde23fe724db13bea1ae3bb13",
"segments":[
    { "name":"Aerospace" },
    { "name":"Auto repair" },
    { "name":"Commercial" },
    { "name":"Education" },
    { "name":"Energy" },
    { "name":"Farm/ranch" },
    { "name":"Furniture" },
    { "name":"Heavy Equipment" },
    { "name":"Hobbyist" },
    { "name":"Infrastructure" },
    { "name":"Luxury/Leisure" },
    { "name":"Military" },
    { "name":"MUP" },
    { "name":"Processing" },
    { "name":"Rail" },
    { "name":"Transportation" }
]}

And I want to map that to a new Array that would look like:

[
  { value: "Aerospace", viewValue: "Aerospace" },
  { value: "Auto Repair", viewValue: "Auto Repair" },
  { value: "Commercial", viewValue: "Commercial" }
  ...
 ]

To accomplish this, I have tried this code in my Service:

getSegments(): Observable<any[]> {
  return from(this.database.get('segments'))
  .pipe(
    map((results) => results.segments)
  );
}

And I transform the array in my Component like this:

segments: SegmentsLookup[] = [];
...
this.lookupDbService.getSegments()
  .subscribe(data => {
    data.forEach(element => {
      this.segments.push({value: element.name, viewValue: element.name});
  });
});

This works but I know there is a way to map this properly back in the Service code. Also, when done this way, the compiler complains about the "results.segments" stating "Property "segments" does not exist on type '{}'.

How do I map the data retrieved to the Array that I need in the Service's "getSegments" method?

解决方案

You can do the transformation is 2 steps:

• pipe/map to extract the segments
• array/map to convert to the final data type

Please see an example here: https://stackblitz.com/edit/angular-ikb2eg?file=src%2Fapp%2Fapp.component.ts

let transformedData = observableData.pipe(
  map(data => {
    console.log(data, data.segments.length);
    return data.segments.map(element => {
      return { value: element["name"], viewValue: element["name"] };
    });
  })
);

transformedData.subscribe(data => {
  this.mylist = data;
});

这篇关于Rxjs 将 Json 文档中的数组映射到新的数组类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！