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

Issue

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.

Solution

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); 

Answered By - Alireza Ahmadi