RXJS Operators for Nested Arrays

Question

I have a output like below from an observable. I want to transform this output into a string format as for all true records "John~Ford,Fiat". I want to acheive this using RXJS operators. Can someone show me how can i get to this.

[{
  "name":"John",
  "age":30,
  "selected" : true,
  "cars": [
      { "selected":"true",  "name":"Ford", "models": "Mustang"},
      { "selected":"false", "name":"BMW", "models": "320" },
      { "selected":"true", "name":"Fiat", "models":"500" }
  ]
 },
 {
  "name":"alex",
  "age":40,
  "selected" : false
  "cars": [
      { "selected":"true",  "name":"tesla", "models": "x"},
      { "selected":"false", "name":"merc", "models": "300" },
      { "selected":"true", "name":"honda", "models":"accord" }
   ]
  }
]

I am able to filter the records but not sure how to format the to the string output("John~Ford,Fiat".)

myComp.myService.carOptions$.pipe(
      take(1),
      flatMap(carOptions => carOptions as options[]),
      filter(carOption => carOption.selected === true),
      flatMap(options => options.values as values[]),
      filter(optionValue => optionValue.isSelected === true),
      toArray()
);

Is the array at the top what comes out the the carOption$ obersvable? If so, this is just a normal array operation in a normal map. The filter operator you're using is for filtering out observable results, not for filtering within the results themselves. — Kurt Hamilton
– Kurt Hamilton, Commented Feb 25, 2020 at 18:11
@kurt Hamilton yes the array at the top is the output of the observable. Oh ok, so how can i use the filter operator in this case. — Deadpool_er
– Deadpool_er, Commented Feb 25, 2020 at 18:23
Is the "alex" in this example, a false record, due to its top-level "selected" : false ? — HoseinGhanbari
– HoseinGhanbari, Commented Feb 25, 2020 at 18:25
yes Alex is false record ... incase if Alex is true then output should be John~Ford,Fiat | Alex~tesla,Honda — Deadpool_er
– Deadpool_er, Commented Feb 25, 2020 at 18:27

Kurt Hamilton · Accepted Answer · 2020-02-25 19:12:17Z

3

This isn't an RxJS problem, it's a javascript array problem.

The filter RxJS operator guards the pipe and only lets values through that meet its criteria. It doesn't filter out items within the values that come through.

The take filter you have in there at the moment will only let the first value through and no more. You may not want to keep that in there, but that's not the primary issue here.

Instead, you want to take what's coming out of the observable, and transform it into a different value. This is done inside an RxJS map operator.

myComp.myService.carOptions$.pipe(
  map((result: any): string => {
    return result
      .filter(x => x.selected)
      .map(x => {
        const cars = x.cars
          .filter(x => x.selected)
          .map(x => x.name)
          .join(',');
        return `${x.name}~${cars}`;
      }).join('|');
  })
).subscribe(result => {      
  console.log(result);
});

That map inside the function is transforming the array in your question to an array of strings matching your criteria.

Firstly it only keeps the selected top-level objects. Then it maps each object to a string. That string is a concatenation of "name" "~" and a joined list of car names where selected is true.

I have assumed that car.selected should be a boolean type. You will need to amend the check if it is actually a string type.

DEMO: https://stackblitz.com/edit/angular-snatak

edited Feb 25, 2020 at 19:12

answered Feb 25, 2020 at 18:27

Kurt Hamilton

13.7k1 gold badge28 silver badges42 bronze badges

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

2 Comments

Deadpool_er Over a year ago

@kurl Hamilton thanks a lot. But when i use your code in my actual application, i get errors like "cannot find result" , string only refers to type but being used as value here , expected 1 2 arguments but got 3.

Kurt Hamilton Over a year ago

I accidentally removed some brackets. Try again

HoseinGhanbari · Accepted Answer · 2020-02-25 18:48:53Z

1

https://stackblitz.com/edit/angular-rxjs-filter-problem

  ngOnInit() {
    of(values)
      .pipe(
        map(items => items.filter(item => item.selected)),
        map(items =>
          items.map(item => {
            const cars = item.cars
              .filter(car => car.selected === "true")
              .map(car => car.name)
              .join(",");
            return item.name + "~" + cars;
          })
        )
      )
      .subscribe(val => {
        console.log(val);
        this.result = val;
        this.str = val.join(" | ");
      });
  }

John~Ford,Fiat | alex~tesla,honda

answered Feb 25, 2020 at 18:48

HoseinGhanbari

1,1612 gold badges13 silver badges27 bronze badges

1 Comment

Deadpool_er Over a year ago

Thank you this was the complete answer for my case.

Collectives™ on Stack Overflow

RXJS Operators for Nested Arrays

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related