I have the following stream and I would like to filter and keep only the params that are true(boolean).

{
  "colors": {
    "red": "",
    "yellow": true,
    "green": false
  },
  "size": {
    "t5": true,
    "t10": "",
    "t20": true
  }
}

I need the output to look like this:

{
  "colors": ["yellow"],
  "size": ["t5,t20"]
}

Here are my thougt when I try to deal with this:

• I tried to use map but without success. I guess it's because it's an object and not an array.
• All keys and values are dynamic in this object so I can't use them to manipulate the object.
• flatMap() help me a bit but I don't know what to do with it as I don't know the name of the keys.

this.form.valueChanges
  .debounceTime(400)
  .flatMap(x => Object.values(x))
  .subscribe(console.log)

I have the following stream and I would like to filter and keep only the params that are true(boolean).

{
  "colors": {
    "red": "",
    "yellow": true,
    "green": false
  },
  "size": {
    "t5": true,
    "t10": "",
    "t20": true
  }
}

I need the output to look like this:

{
  "colors": ["yellow"],
  "size": ["t5,t20"]
}

Here are my thougt when I try to deal with this:

• I tried to use map but without success. I guess it's because it's an object and not an array.
• All keys and values are dynamic in this object so I can't use them to manipulate the object.
• flatMap() help me a bit but I don't know what to do with it as I don't know the name of the keys.

this.form.valueChanges
  .debounceTime(400)
  .flatMap(x => Object.values(x))
  .subscribe(console.log)

• javascript
• angular
• rxjs

Share Improve this question Follow edited Nov 7, 2016 at 22:32 cartant 58.5k1717 gold badges168168 silver badges201201 bronze badges asked Nov 7, 2016 at 22:16 TomTom 7951010 silver badges2626 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

This is not an rxjs issue, just a plain js mapping:

getTruthyKeys(obj: any): Array<string> {
   return Object.keys(obj).filter(key => obj[key] === true);
}

mainKeysToTruthyLists(obj: any): Array<{key: string, truthy: Array<string>}> {
  let result = {};
  Object.keys(obj).forEach(key => result[key] = getTruthyKeys(obj[key]);
  return result;
}

and now you can apply it as a map on your stream:

this.form.valueChanges
  .debounceTime(400)
  .map(mainKeysToTruthyLists)
  .subscribe(console.log)

This isn't really a RxJS question. All that RxJS should do here is map. This can be done with Object.entries:

this.form.valueChanges
.debounceTime(400)
.map(obj => {
  return Object.entries(obj)
  .reduce((newObj, [key, subObj]) => {
    const subArr = Object.entries(subObj)
    .filter(([, subValue]) => subValue)
    .map(([subKey]) => subKey);

    return Object.assign(newObj, { [key]: subArr });
  }, {})
})