首页 文章

Json Document中的Rxjs Map Array为新的Array类型

提问于
浏览 次
0

我正从Angular Service中的PouchDB中检索文档 . 以下列格式检索文档：

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

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

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

为此，我在我的服务中尝试了这段代码：

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

我在我的Component中转换数组，如下所示：

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

这有效，但我知道有一种方法可以在服务代码中正确地映射它 . 此外，当以这种方式完成时，编译器会抱怨“'{}'”类型中的“results.segments " stating "属性"segments"” .

如何在Service的“getSegments”方法中将检索到的数据映射到我需要的数组？

javascript mapping angular6 rxjs6

2 回答

  • 1

    你可以做转换是两步：

    • pipe / map来提取段

    • array / map转换为最终数据类型

    请在此处查看示例：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;
});
    回复于
  • 0

    您可以扩展map函数并将其从组件中删除，如下所示：

    map(result => {
        result = result.segments;
        let data = [];
        result.forEach(element => {
            data.push({value: element.name, viewValue: element.name});
        });
        return data;
 });
    回复于

相关问题