title: Angular 6 HttpClient JSON response to myObject
body: <p>I have an API that returns an array of objects when queried with a GET. The response from the API has the form of:</p>
  
  <pre><code>[
      {
          "Ident": "Ag",
          "Description": "Argent"
      },
      {
          "Ident": "As",
          "Description": "Arsenic"
      }
  ]
  </code></pre>
  
  <p>In my app, I have an <em>Element</em> object with the following structure:</p>
  
  <pre><code>export class Element {
      public ident: string;
      public description: string;
  
      constructor(ident: string, description: string) {
          this.ident = ident;
          this.description = description;
      }
  }
  </code></pre>
  
  <p>My app also has a service called <em>mrcService</em> with a function called <em>getElements()</em> that will send a GET request with HttpClient and returns an Observable array of objects <em>Element</em>:</p>
  
  <pre><code>getElements(): Observable&lt;Element[]&gt; {
    return this.http.get&lt;Element[]&gt;(this.apiUrl)
      .pipe(
        catchError(this.handleError('getElements', []))
      );
  }
  </code></pre>
  
  <p>Finally, I have a component that subscribes to this service in <em>ngOnInit() {}</em>, it takes each element of the array returned by the API and push them into an array:</p>
  
  <pre><code>elements: Array&lt;Element&gt; = [];
  ngOnInit() {
      this.mrcService.getElements()
        .subscribe(res =&gt; {
          res.forEach(item =&gt; {
            this.elements.push(new Element(item.Ident, item.Description));
          });
          console.log(this.elements[0]); // returns the object at the index
        });
      console.log(this.elements[0]); // returns undefined
    }
  </code></pre>
  
  <p>I now face two problems:</p>
  
  <ul>
  <li><p>When pushing to my array, the observable properties must be referenced according to the nomenclature of the response by the API. I would like to use <em>ident</em> and * description* without capital letters like in my object definition instead of the capitalised letter from the API response.</p></li>
  <li><p>I can't use this.elements[i] outside of <em>.subscribe</em>. When I do <em>console.log(this.elements[i]</em> it says undefined, but when I do <em>console.log(this.elements)</em> I can see the structure of the array.</p></li>
  </ul>