How to set value not contained in map with RxJS?

Question

I am just getting started with Angular 4, and have a project I've been working on that involves displaying data that is retrieved using a REST API. The data seems to be getting retrieved properly and the form getting populated correctly.

Now, one of the values returned from the API only contains a single character. I was hoping to override the setter method to expand that single character to a full string. I understand I could just change the call to return the full string, however the API is supporting by multiple front-ends and I was hoping to keep them consistent. This plunker should what I am hoping to do (without the REST API involved): Plunker example

When logging in the subscribe function of my project, fullStatus is not included:

this.service.get(id).subscribe(p => { 
    this.test = p;
    console.log(this.test);
});

When adding the switch statement here, things work as intended, however I was hoping to have this logic be bundled into the Test class instead of the subscribe function.

this.service.get(id).subscribe(p => {
    this.test = p;
    switch (this.test.status) {
      case 'A':
        this.test.fullStatus = 'Active';
        break;
      case 'I':
        this.test.fullStatus = 'Inactive';
        break;
      case 'N':
        this.test.fullStatus = 'No Certificate';
        break;
      default:
        this.test.fullStatus = '';
        break;
    }
    console.log(this.test);
  });

Is there a better way for me to handle this? Thanks in advance.

Brandon · Accepted Answer · 2017-10-09 16:50:11Z

3

Can't you do a map of your results after the api call to include this fullStatus property?

In your service,

// assuming you have to convert the response to json
get(id) {
 return this.http.get(<url-to-get>).map((res) => {
  let test = res.json();
  switch (this.test.status) {
      case 'A':
       test['fullStatus'] = 'Active';
        break;
      case 'I':
       test['fullStatus'] = 'Inactive';
        break;
      case 'N':
       test['fullStatus'] = 'No Certificate';
        break;
      default:
       test['fullStatus'] = '';
        break;
    }

  return test; // returns each response element with the new property 'fullStatus' added based on its 'status'
 });
}

Then you can simply subscribe it in your component class. Hope it helps.

edited Oct 9, 2017 at 16:50

Brandon

39.3k8 gold badges86 silver badges89 bronze badges

answered Oct 9, 2017 at 16:35

amal

3,1801 gold badge15 silver badges21 bronze badges

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

1 Comment

Tommo Over a year ago

That makes sense and is similar to what I am currently doing in my component class subscribe right now. I was just hoping to have the logic exist somehow in the data class instead.

asmmahmud · Accepted Answer · 2017-10-09 16:19:42Z

You can create a test class like test-model.ts :

  export class Test {
      prop1 = ''; // dummy property (you can define these according to your need
      prop2 = '';

      status: string;
      fullStatus?: string; // optional 

      init(responseData: any){
        this.prop1 = responseData.prop1 ; 
        this.prop2 = responseData.prop2 ; 
        this.status = responseData.status;
        switch (responseData.status) {
              case 'A':
                  this.fullStatus = 'Active';
                  break;
              case 'I':
                   this.fullStatus = 'Inactive';
                   break;
              case 'N':
                 this.fullStatus = 'No Certificate';
                   break;
              default:
                 this.fullStatus = '';
                 break;
         }
      }
  }

In the component:

  import {Test} from './test-model';

  export class TestComponent implements OnInit
  {
      test: Test = new Test();
      constructor(private service: MyService){}

      ngOnInit(){
        this.service.get(id).subscribe(p => {
          this.test.init(p);

          console.log(this.test);
        });
      }
   }

Collectives™ on Stack Overflow

How to set value not contained in map with RxJS?

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