rxjs

Pluck() Operator

Pluck() Operator

In this tutorial, we will learn about the pluck operator event of RXJS.

Maps each source value (an object) to its specified nested property.

Get specifc property from data

The pluck operator helps us to get the property of our data

Suppose we have one nested array as follows:

users = [
    {
      name: "JIgar",
      skills: "Angular",
      job: {
        title: "Front",
        exp: "02 years",
      },
    },
    {
      name: "JIgar1",
      skills: "Node",
      job: {
        title: "HTML",
        exp: "10 years",
      },
    },
    {
      name: "John",
      skills: "CSS",
      job: {
        title: "NODE",
        exp: "11 years",
      },
    },
    {
      name: "Aman",
      skills: "SCSS",
      job: {
        title: "Backend",
        exp: "12 years",
      },
    },
  ];

Example -1:

Now we want only name property from the above array and want to create another array just with names, let's see how we can do this using the pluck operator:

import { map, pluck, toArray } from "rxjs/operators";

from(this.users)
      .pipe(
        pluck("name"), 
        toArray()
      )
      .subscribe((res) => {
        console.log(res);
      });

The above Example will output:

["JIgar", "JIgar1", "John", "Aman"]

Example-2:

What if we want to get the title of job which is inside every object, let see how we can do this:

from(this.users)
      .pipe(
        pluck("job", "title"
        toArray()
      )
      .subscribe((res) => {
        console.log(res);
      });

It will Output:

["Front", "HTML", "NODE", "Backend"]

If You Appreciate What We Do Here On TutsCoder, You Should Consider:

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Support Us

We are thankful for your never ending support.

Leave a Comment