title: Pattern for dealing with mapping API objects to UI model objects
body: <p>I am switching to use the new HttpClient in angular.</p>
  
  <p>The API am calling returns json data in one format. I want to take this data and transform it into a  typescript model class suitable for the UI to work with.</p>
  
  <p>The way I did this before was by using the map function e.g. </p>
  
  <pre><code>        return this.httpClient.get(url, { headers: headers })
          .map(mapFunction)
          .catch(errorFunction);
  </code></pre>
  
  <p>Where the map function does the heavy lifting of transforming the api response intro a model object e.g. </p>
  
  <pre><code> const mapFunction =
              (response: Response) =&gt; {
                  const data = response.json();
                  const contacts: Contact[] = [];
                  let i = 0;
                  for (const result of data.resourceResults) {
                      i = i + 1;
                      const contact: Contact = new Contact();
                      contact.role = result.r
  </code></pre>
  
  <p>To me this seems quite cumbersome and I am basically looking for a way to map objects from the api response type to the ui model type without having to use a custom map function for each request.</p>