CODEWITHSUNDEEP
angularangular6
Jim P.
Jim P.

Reputation: 303

Angular 6 HttpClient JSON response to myObject

I have an API that returns an array of objects when queried with a GET. The response from the API has the form of:

[
    {
        "Ident": "Ag",
        "Description": "Argent"
    },
    {
        "Ident": "As",
        "Description": "Arsenic"
    }
]

In my app, I have an Element object with the following structure:

export class Element {
    public ident: string;
    public description: string;

    constructor(ident: string, description: string) {
        this.ident = ident;
        this.description = description;
    }
}

My app also has a service called mrcService with a function called getElements() that will send a GET request with HttpClient and returns an Observable array of objects Element:

getElements(): Observable<Element[]> {
  return this.http.get<Element[]>(this.apiUrl)
    .pipe(
      catchError(this.handleError('getElements', []))
    );
}

Finally, I have a component that subscribes to this service in ngOnInit() {}, it takes each element of the array returned by the API and push them into an array:

elements: Array<Element> = [];
ngOnInit() {
    this.mrcService.getElements()
      .subscribe(res => {
        res.forEach(item => {
          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
  }

I now face two problems:

Upvotes: 0

Views: 2597

Answers (1)

Jean Guzman
Jean Guzman

Reputation: 2202

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 ident and * description* without capital letters like in my object definition instead of the capitalised letter from the API response

If you don't have access to the API and you still want to have it that way you could modify it using the observable map operator to change the object properties key to the way you want them.

I can't use this.elements[i] outside of .subscribe. When I do console.log(this.elements[i] it says undefined, but when I do console.log(this.elements) I can see the structure of the array.

Remember that observables are asynchronous, so at the time you do console.log outside of the subscription, your http request has not completed.

Upvotes: 3

Related Questions