Angular returns data from an API call as [Object Object], but undefined in the component

Question

I'm working on a project, and have come to a huge blocking point.

As I mentioned in my question, I've built a dataService, but my dataService shows the response properly, but it comes up as undefined in my Component.

Here's my code for the data.service.ts file

import { Injectable, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import {
  Http,
  Response,
  Request,
  RequestOptions,
  Headers
} from '@angular/http';


import {Observable} from 'rxjs/Observable';
import { Institution } from './institution';
import 'rxjs/Rx';

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
};

@Injectable()
export class DataService {
  constructor(private http: HttpClient) { }
    institutionData: Object;
    //private http: Http;


 grabInstitutionData(): Observable<Institution[]> {
    return this.http
      .get(`http://127.0.0.1:8000/courses/api/institution/list/`)
      .map((response: Response) => {
        console.log(response);
        this.institutionData = <Institution[]>response.json();
        console.log('this is right' + this.institutionData);
        return this.institutionData;
      })
      .catch(this.handleError);
  }

private handleError(error: Response) {
  return Observable.throw(error.statusText);
}

}

And my code for the Component File:

import { async } from '@angular/core/testing';
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import {Http, Response} from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { Institution } from '../institution';

@Component({
  selector: 'app-institutions',
  templateUrl: './institutions.component.html',
  styleUrls: ['./institutions.component.css']
})



export class InstitutionsComponent implements OnInit {
  institutionData: Object;
  _InstitutionsArray: Institution[];
  constructor(private http: Http, private dataService: DataService) { }

getInstitutions(): void {
    this.dataService.grabInstitutionData()
      .subscribe(
        resultArray => this._InstitutionsArray = resultArray,
        error => console.log("Error :: " + error)
      );
  }

  ngOnInit(): void {
    this.getInstitutions();
  }

}

I know its related to something pertaining to the asynchronous function call, but I can't exactly figure out what it would be.

Any and all help would be appreciated.

The component function at line 28 (error => console.log("Error :: " + error)) Showed the error in the console. The data was also undefined. The question has been answered, but I very much appreciate your feedback and will include that the next time I have a question. — LawrenceThomp
– LawrenceThomp, Commented Apr 28, 2018 at 22:29

Eliseo · Accepted Answer · 2018-04-28 22:08:12Z

1

El-Teezus, not use map and not use json(). When we use "map" is for transform the response, It have not sense in your code

//In our service

grabInstitutionData(): Observable<Institution[]> {
    return this.http
      .get(`http://127.0.0.1:8000/courses/api/institution/list/`)
      .do(response:Response)=>{
        console.log(response);
        this.institutionData = <Institution[]>response;
        console.log('this is right' + this.institutionData);
       }) 
      .catch(this.handleError);
  }

See that we use "do" to do "something" with the response without change it. Yes, "do" is to check if a respone is the respone expected or not or to cache the result anyway. See too that we don't need write response.json(). HttpClient make it for us.

In your component

getInstitutions(): void {
    this.dataService.grabInstitutionData()
      .subscribe(
        (resultArray) => 
         {
           this._InstitutionsArray = resultArray
           //here you have the data
           console.log(this._Institutionsrray);
         },
        (error) => console.log("Error :: " + error)
      );
  }

answered Apr 28, 2018 at 22:08

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

3 Comments

LawrenceThomp Over a year ago

IT WORKS! Thank you so much. I spent quite a few hours chasing my tail here. I think next time I'll look through the documentation and see what calls there are for http.

Luillyfe Over a year ago

@El-Teezus If it works please consider to mark as an answer!

LawrenceThomp Over a year ago

Just did! didn't know how to do that. Good pointing that out.

Collectives™ on Stack Overflow

Angular returns data from an API call as [Object Object], but undefined in the component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related