Pluck Operator - RXJS

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"]