使用rxjs扁平的对象嵌套阵列

Question

我们的数据结构是一个嵌套的数组，

interface dtModel {
  id: number;
  permission: number;
  childs: dtModel[];
}

const data: dtModel[] = [
  {
    id: 1,
    permission: 2,
    childs: [
      {
        id: 2,
        permission: 1,
        childs: [
          {
            id: 3,
            permission: 3,
            childs: [],
          },
        ],
      },
    ],
  },
  {
    id: 4,
    permission: 1,
    childs: [
      {
        id: 5,
        permission: 2,
        childs: [
          {
            id: 6,
            permission: 3,
            childs: [
              {
                id: 7,
                permission: 1,
                childs: [],
              },
            ],
          },
        ],
      },
    ],
  },
];

我在RXJ的帮助下尝试的对象创建了一个扁平的阵列，但我尚未成功，但

[
  {id:1,permission:2},
  {id:2,permission:1},
  {id:3,permission:3},
  {id:4,permission:1},
  {id:5,permission:2},
  {id:6,permission:3},
  {id:7,permission:1}
]

我尝试在“降低”的帮助下做到这一点，但因为我的孩子的属性并不总是拥有与这种方法相同的长度。

of(data)
  .pipe(
    map((items: dtModel[]) => {
      return items.reduce((res, curr) => {
        res.push({ id: curr.id, permission: curr.permission });
        return res;
      }, []);
    })
  )
  .subscribe(console.log);

stackblitz

Answer 1

需要进行递归

const source = [
  {
    id: 1,
    permission: 2,
    childs: [
      {
        id: 2,
        permission: 1,
        childs: [
          {
            id: 3,
            permission: 3,
            childs: [],
          },
        ],
      },
    ],
  },
  {
    id: 4,
    permission: 1,
    childs: [
      {
        id: 5,
        permission: 2,
        childs: [
          {
            id: 6,
            permission: 3,
            childs: [
              {
                id: 7,
                permission: 1,
                childs: [],
              },
            ],
          },
        ],
      },
    ],
  },
];

const result  = [];

const getAllItemsPerChildren = (item) => {
  result.push({ id: item.id, permission: item.permission });
  if (item.childs) {
    return item.childs.map((i) => getAllItemsPerChildren(i));
  }
};

source.forEach((i) => getAllItemsPerChildren(i));

console.log(result)

rxjs解决方案

demo： htttps://stackblitz.com /Edit/typescript -dlva1z?file= index.ts

const source$ = of({
  data: [],
  last: false,
  check: source,
}).pipe(
  expand((data) =>
    data.last
      ? EMPTY
      : of(data.check).pipe(
          map((currentItem) => {
            const childs = (currentItem as any).flatMap((i) => i?.childs || []);
            return {
              data: currentItem.map((i) => ({
                id: i.id,
                permissions: i.permission,
              })),
              last: !childs?.length,
              check: childs,
            };
          })
        )
  ),
  reduce((acc, items) => [...acc, ...(items as any).data], [])
);
source$.subscribe((data) => console.log('result ', data));

说明：

• 使用Expand> Expand操作员的主要思想 - 它允许我们创建递归。
• 要停止递归需要返回空
• （{data：[]，last：false，check：source}） - 这是我们的商店
• data被分配以保留分析的项目 - 将用于减少操作员 - 对整个数据cont
• 一个从展开等于一个emit
• last 允许控制恢复，我们正在检查所有项目是否均被解析
• 检查 - 解析的元素，将Intial值设置为整个数据

Answer 2

简化的 expand 版本，只需要确保发出每个项目并在最后使用 map

工作示例进行一些清理：https://codesandbox.io/s/rxjs-playground-forked-vr0l6s?file=/src/index.js

from(data)
  .pipe(
    expand((obj) => {
      return obj.childs && obj.childs.length
        ? from(obj.childs)
        : EMPTY;
    }),
    map(obj=>({ id: obj.id, permission: obj.permission })),
    toArray()
  )
  .subscribe(console.log);

非常好的文章解释了expand用法https://ncjamieson.com/understand-expand/

Answer 3

您需要进行树（=您的数据结构）遍历，并且对于每个节点，您必须将 {id://some id,permission://somepermission} 推送到结果数组上。

你不需要 rxjs。