从角度对象中删除空 []

Question

这是我的服务类方法

public getSidebarItems(): Observable<INavData[]>   {

    //  let params = new HttpParams();
    //  params = params.set('userId', userid.toString());
      return this.httpClient.get<Result<INavData[]>> (`${baseUrl}/GetMenusByRoles`)
       .pipe(map( res => res.data));
      
  }

这是我从 api 收到的 json 文件

[{"id":1,"name":"Dashboard","url":"/dashboard","icon":"icon-speedometer","parentId":null,"parent" :null,"children":[]},{"id":2,"name":"User","url":"/user/user-list","icon":"icon-list"," parentId":null,"parent":null,"children":[]},{"id":3,"name":"Role","url":"/role/role-list","icon" :"icon-folder-alt","parentId":null,"parent":null,"children":[]},{"id":4,"name":"Bank","url":"/银行/银行列表","icon":"icon-folder-alt","parentId":null,"parent":null,"children":[]},{"id":5,"name": "分支","url":"/branch/branch-list","icon":"icon-folder-alt","parentId":null,"parent":null,"children":[]},{ "id":6,"name":"Customer","url":"/customer/customer-list","icon":"icon-folder-alt","parentId":null,"parent":null ,"children":[]},{"id":7,"name":"Transaction","url":"/transaction/transaction-list","icon":"icon-folder-alt"," parentId":null,"parent":null,"children":[{"id":8,"name":"Test","url":"/report/transaction-report\n","icon": "icon-folder-alt","parentId":7,"children":[]}]}]

我必须删除空的“孩子”：[]

items$: 可观察的;

 let result=this.sidebar.getSidebarItems();   
  this.items$ = result.pipe(
    map( sidebarItems => {
      return sidebarItems
      .filter( value=> Object.keys( value ).length !==0 )
     
   }));

以上代码fremove empty

我的问题是

1. 上面的代码不起作用..我必须删除带有节点子节点的空子节点“：[]。

请告诉我..谢谢

编辑：

export interface INavData {
    name?: string;
    url?: string;
    icon?: string;
    childrens?: INavData[];
    ..other property
}

编辑 1：

更新代码后：

 result.pipe(
        map(x => {
            return this.removeEmptyObjects(x);
        })
       ).subscribe(results => { console.log(results); });

Answer 1

在循环对象数组时。使用object.entries 获取对象信息。这将为您提供键和值作为数组，然后过滤出空数组。 循环遍历结果集并从主对象中删除这些键。

const { from } = rxjs;
const { map, reduce } = rxjs.operators;

var data =[{"id":1,"name":"Dashboard","url":"/dashboard","icon":"icon-speedometer","parentId":null,"parent":null,"children":[]},{"id":2,"name":"User","url":"/user/user-list","icon":"icon-list","parentId":null,"parent":null,"children":[]},{"id":3,"name":"Role","url":"/role/role-list","icon":"icon-folder-alt","parentId":null,"parent":null,"children":[]},{"id":4,"name":"Bank","url":"/bank/bank-list","icon":"icon-folder-alt","parentId":null,"parent":null,"children":[]},{"id":5,"name":"Branch","url":"/branch/branch-list","icon":"icon-folder-alt","parentId":null,"parent":null,"children":[]},{"id":6,"name":"Customer","url":"/customer/customer-list","icon":"icon-folder-alt","parentId":null,"parent":null,"children":[]},{"id":7,"name":"Transaction","url":"/transaction/transaction-list","icon":"icon-folder-alt","parentId":null,"parent":null,"children":[{"id":8,"name":"Test","url":"/report/transaction-report\n","icon":"icon-folder-alt","parentId":7,"children":[]}]}];

from(data).pipe(
  map(x => {
      return removeEmptyObjects(x);
  })
).subscribe(results => { console.log(results); });

function removeEmptyObjects(x){
      var emptyKeys = getEmptyObjects(x);
          removeKey(x,emptyKeys);
      if (x.children && x.children.length>0) {
        x.children.map(y=>removeEmptyObjects(y));
      }
          return x;
}
 
function getEmptyObjects(x){
return Object.entries(x)
    .filter(x => Array.isArray(x[1]) && x[1].length == 0);
}

function removeKey(obj,tobeRemoved) {
  if(tobeRemoved && tobeRemoved.length > 0) {
              tobeRemoved.map(key=> delete obj[key[0]])
   }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.3.3/rxjs.umd.min.js"></script>

编辑 1：更新了嵌套层级移除的代码。

编辑 2 因为它返回对象数组，所以我们需要使用它的 map 函数。

result.pipe(
        map((x) => {
          return x.map((y) => this.removeEmptyObjects(y));
        })
      )
    .subscribe((results) => {
      console.log(results);
    });

Answer 2

在 observable 上使用 rxjs pipe & map 运算符将原始数据转换为您想要的格式。

this.sidebar.getSidebarItems().pipe(
  map( sidebarItems => {
     return sideBarItems
     .filter( value=> Object.keys( value ).length !==0 )
     .filter( value=> JSON.stringify( value !== '[]' ) )
     .map( (item: SideBarItem) => {
        return removeEmpty(item);
     });
  }
);

• 第一个映射采用从可观察对象返回的值并允许您对其进行操作

这允许您订阅一个共享的 Observable，但将值转换为您需要的格式。