Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

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

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.

about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

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

about 4 years ago · Juan Pablo Isaza Denunciar

0

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

about 4 years ago · Juan Pablo Isaza Denunciar

0

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);
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda