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 ponent class

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

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

appProfileData: AppProfilesDetailsDO[];

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

ngOnInit() {
   console.log("In profiledetails ponent");
   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 ponent

import { HttpClient } from "@angular/mon/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.

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 ponent class

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

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

appProfileData: AppProfilesDetailsDO[];

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

ngOnInit() {
   console.log("In profiledetails ponent");
   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 ponent

import { HttpClient } from "@angular/mon/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.

• javascript
• angular
• typescript

• Just console log the output and your issue will be resolved. – Vimal Patel Commented Aug 3, 2021 at 3:46

3 Answers 3

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

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

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