How to modify Observable values with rxjs operators?

Question

I have an angular app and in one of the components I'm getting user's notifications(Emails) via a service. the service returns an array of Objects and in each object there's information of an email like subject , userid of the sender, etc. the structure of array of email object is like this:

[{
  UserId:"...",

  Notification:{
     Subject:null,
     Body:"<div>...</div>",
     .
     .
     .
  },
  .
  .
  .
},
.
.
.]

some emails don't have subject and the value of Subject property is null in the object. I want to set a value for emails with Subject:null.

this.notifService.getAllNotificationsForCurrentUser(userId)
.pipe(
    map(emails => {
       emails.map(email=>{
         if(email.Notification.Subject === null){
            email.Notification.Subject = "(No Subject)";
         }
       })
    }
)
.subscribe(
    result=> this.messages = result
);

I used map operator and it doesn't work. and it has some errors:

Cannot read property 'Notification' of undefined

how can I fix it?

hi, could you please tell in detail again? what is your exact problem? — Seyed-Amir-Mehrizi
– Seyed-Amir-Mehrizi, Commented Apr 10, 2019 at 7:07
If you tried something and it didn't work, then post what you tried, tell precisely what you expected to happen, and what happened instead. — JB Nizet
– JB Nizet, Commented Apr 10, 2019 at 7:09

jo_va · Accepted Answer · 2019-04-10 07:58:20Z

3

Use the rxjs map operator with Array.prototype.map().

The first map allows you to modify the array of emails as if flows down the stream. It maps over the stream elements, each element is an array of emails.
The second map changes the array of emails to set the empty subject fields to no subject. It maps over the emails array, each element is an email.

import { map } from 'rxjs/operators';

this.notifService.getAllNotificationsForCurrentUser(userId).pipe(
    map(emails => {
        return emails.map(email => ({
            ...email,
            Notification: {
                ...Notification,
                Subject: email.subject ? email.subject : 'no subject'
            }
        }));
    })
).subscribe(
    result=> this.messages = result
);

edited Apr 10, 2019 at 7:58

answered Apr 10, 2019 at 7:08

jo_va

14.1k3 gold badges25 silver badges49 bronze badges

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

1 Comment

jo_va Over a year ago

@Nastaran Heydari, you have to return the result from the inner map, in my example I am using an implicit return. Also your inner map does not return anything, use forEach in that case

sabithpocker · Accepted Answer · 2019-04-10 08:08:51Z

1

If this is only for display purposes, you should just do

{{email.Notification.Subject || '(No Subject)'}}

If not, go for mapping the array.

answered Apr 10, 2019 at 8:08

sabithpocker

15.6k1 gold badge44 silver badges78 bronze badges

Collectives™ on Stack Overflow

How to modify Observable values with rxjs operators?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related