Remove empty [] from object in angular

Question

This is my service class method

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));
      
  }

This is my json file recieved from api

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

I have to remove empty "children": []

items$: Observable<INavData[]>;

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

The above code fremove empty

My Question is

Above code is not working .. i have to removeempty children with node children":[].

Please let me know ..thanks

EDIT:

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

EDIT 1:

After updating code:

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

yes @VimalPatel ..i have to remove "children":[]. (only empty childs) Model is updated in the quesion. — Lajith
– Lajith, Commented Jan 9, 2021 at 5:23

Vimal Patel · Accepted Answer · 2021-01-09 08:10:49Z

3

While looping through array of object. Grab the object information's using object.entries. This will give you keys and values as an array then after filter out empty array. Loop through resultset and delete those keys from your main object.

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>

Edit 1: updated the code for nested level removal.

Edit 2 As it is returning array of object we need to use map function of that.

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

edited Jan 9, 2021 at 8:10

answered Jan 9, 2021 at 6:28

Vimal Patel

3,1152 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Lajith Over a year ago

Thank you ..but ur code work only leve-0 objects..it remains in lev -1 i.e "id": 8...Is it possible to all child elemants

Vimal Patel Over a year ago

Yes, that can be done, Do want to remove this logic for all the keys or just children?

Vimal Patel Over a year ago

I have updated the code for nested level also, please check.

Lajith Over a year ago

But it is not removing when applied same thing in INav[] ..What could be the reason..?beacuse from api am assing to INavData[] and then i have to remove []

Vimal Patel Over a year ago

Does it not removing from all the objects or few?

|

Edward · Accepted Answer · 2021-01-09 04:27:10Z

1

use the rxjs pipe & map operator on the observable to transform the raw data to the format you desire.

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);
     });
  }
);

the first map takes the value returned from the observable and allows you to operate on it

this allows you to subscribe to an shared Observable, but transform the values to the format you need.

answered Jan 9, 2021 at 4:27

Edward

1,1361 gold badge14 silver badges27 bronze badges

1 Comment

Lajith Over a year ago

Thanks .actullay my problem is i have to remove empty [] in object...i have updated the question

Collectives™ on Stack Overflow

Remove empty [] from object in angular

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related