I am getting '[object Object]' from service to component using Angular

Question

Please help on the below issue this is my model class. I tried all the possible ways using .pipe.map() import {map} from rxjs/operators method, but still giving [object Object]

export class AppProfilesDetailsDO { 
  envName?: string;
  envDesc?: string;
  envIpAddress?: string;
  envProfileName?: string;
  envCrDeployed?: string;
  envUrl?: string;
  envAdminConsoleUrl?: string;
  envDbSchema?: string;
  envDbUserId?: string;
  envGisSchema?: string;    
  envPortNo?: number;
 }

my component class

import { Component, OnInit } from '@angular/core';
import { ProfileserviceService } from './profileservice.service';
import { AppProfilesDetailsDO } from '../models/AppProfilesDetailsDO';

@Component({
    selector: 'app-profiledetails',
    templateUrl: './profiledetails.component.html',
    styleUrls: ['./profiledetails.component.css']
})
export class ProfiledetailsComponent implements OnInit {

appProfileData: AppProfilesDetailsDO[];

constructor(private profileService: ProfileserviceService) { this.appProfileData = [] }

ngOnInit() {
   console.log("In profiledetails component");
   this.profileService.getProfileSetUpDetails().subscribe(
    appProfileData => {
       this.appProfileData = appProfileData;
    }
  );
  console.log("Compenent Profile Data: "+this.appProfileData); ==> **in my console it is 
  printing as ==> [object Object] **
 } 
}

My service component

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { AppProfilesDetailsDO } from "../models/AppProfilesDetailsDO";

@Injectable({
  providedIn: 'root'
})
export class ProfileserviceService {

 BASE_PATH:string = "http://localhost:8080/getProfileSetUpDetails";

 constructor(private httpClient: HttpClient) {}

 httpOptions = {
    headers: new Headers ({
        'Content-type': 'application/json'
    })
 }
 appProfileData?: AppProfilesDetailsDO[];

 getProfileSetUpDetails() : Observable<AppProfilesDetailsDO[]> {
    return this.httpClient.get<AppProfilesDetailsDO[]>(this.BASE_PATH);
  }
}

I am not sure where it is wrong. Please help on this issue.

Thanks.

Answer 1

The problem is this line console.log("Compenent Profile Data: "+this.appProfileData); . You are trying to concatenate an object with a string.

Simply change that line to console.log("Compenent Profile Data: ", this.appProfileData);

For more clarity look at this example:

 var data = { a: "ali" }; console.log("Compenent Profile Data: " , data); console.log("Compenent Profile Data: " + data);

Answer 2

If you want to see the result it should be like this

   console.log("Component Profile Data:", this.appProfileData);

other ways it will try to log the concatenated value of string with the result object which is impossible

Answer 3

You can not impose concatenation in between string and an array of object as you did like this:

console.log("Compenent Profile Data: "+this.appProfileData);

So, just use like this instead and problem will be gone:

console.log(this.appProfileData);