-1

I am leveraging HttpClient instead of Http for my service call along with Observable which works well. However, I want to map some of the custom properties. Is that something we can fetch and map?

To give you background: I have One service: this calls web api and pack the result in Observable> like>

getArticles(): Observable<Array<ArticleViewModel>> {
   return this.httpClient.get<Array<ArticleViewModel>>(this.url.articleurl);
}

next I have component, which calls this server like:

getArticles(): void {
  this.articles = this.articleService.getArticles();
}

finally, I have ViewModel which has all the properties of Article ViewModel.

However, the Web Api returns much more properties than I have in my Angular View Model. Moreover, some of the properties has different name than I have in Angular VM. So, I want to map those with correct properties and further I want to use some of the web api properties just to validate before setting up Angular Property value.

But the same time, I don't want to use http (@angular/http). I want to continue with latest httpclient (@angular/common/http). But that service directly map the result with my angular view model.

so is that something we can create view model meaningfully by checking all the web api properties?

enter image description here

Brijesh
  • 61
  • 1
  • 11
  • do you later call `this.articles.subscribe(res => {}, err => {}, () => {})` or something similar? – mast3rd3mon Apr 09 '18 at 14:42
  • If your server sends `Foo`, and your view model is `FooSlightlyModified`, then what you need to do is modify `Foo` before passing it to your template. You can do this with RxJS operators like `map`. – Lansana Camara Apr 09 '18 at 14:44

1 Answers1

1

Sure, it's even really easy ! 

return this
  .httpClient
  .get<ArticleViewModel[]>(this.url.articleurl)
  .map(articles => {
    const mapped: ArticleViewModel[] = [];
    for (let article of articles) {
      const _a = new ArticleViewModel(/* fields */);
      mapped.push(_a);
    }
    return mapped;
  });

If you have a constructor in your class, this will be a piece of cake with that !

  • sorry, may be I am new to angular and that's why taking time to understand. I have tried to implement your code in my service class inside getarticles() methos. However there are two issues I am getting (1) a function whose declared type neither void nor any must need to return type (2) you have commented /* fields */ can you please guide how can I use that area to get the new property value from the api url ? note: that is some different property name than my angular view model has. – Brijesh Apr 09 '18 at 18:20
  • 1) remove the `: void` after the parameters of your function 2) this is a constructor like you would see in every other language. Is it your first time programming ? If so, I advise you take a course or look at a tutorial on object oriented programming. This will explain you how constructors work. –  Apr 09 '18 at 18:33
  • Hi, I have modified that in service class not in component. so, void is in component which probably we don't need to change. Moreover, I have added the debugger screenshot in main question. if you can check and guide me further – Brijesh Apr 09 '18 at 18:44
  • Definitely learn about object oriented programming. I won't teach you that right now on stack overflow. –  Apr 09 '18 at 18:44
  • make sense. Thanks. – Brijesh Apr 09 '18 at 18:57
  • Hi trichetriche, I don't think your solution will also work. because you code also directly map the items into ArticleViewModel [see the mapping httpClient.get(this.url.articleurl)]. Here the question is what about those properties which we don't have in our Angular View Model - ArticleViewModel How to get those in account ? – Brijesh Apr 10 '18 at 04:45
  • It's working now. I am accepting your answer sir. constructor(values: Object = {}) { console.log(values); Object.assign(this, values); } – Brijesh Apr 10 '18 at 13:11
  • @Brijesh nice shortcut ! Glad it works for you then, but be careful because this shortcut will keep the values you don't want ! –  Apr 10 '18 at 13:12