ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'(Angular)

Question

I've got the error in the title when I created this program. I try to get some info from an REST API using Angular. I attached the service, the ts from the component and the html. I use rxjs and Observable for this. I inject the service in the constructor. I will appreciate any help. Thank you!

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { HeroService } from './services/hero.service';
import {Customer} from './models/customer';

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

  private ndg: string;
  public customerData;

  constructor(private heroService: HeroService) {
     this.ndg='117158101';
   }

  ngOnInit() {
      this.heroService.getCustomerInfo(this.ndg)
        .subscribe(data => { this.customerData=data,
          console.log(this.customerData)
        }, error => console.log(error));
    }
}

import { Injectable } from '@angular/core';
import { ApiService } from '../../../../services/base.services';
import { Observable } from 'rxjs';
import { environment } from '../../../../../../environments/environment';
import {Customer} from '../models/customer';

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

  constructor(private apiService: ApiService) { }

  getCustomerInfo(ndg: string) {
    const url = `${environment.apiUrl}${environment.ur3Path}cifCustomerDetails/customers/${ndg}`;
    return this.apiService.get(url);
  }
}

<!--
 --   Hero component
-->

<section class="hero">
  <div class="content-hero" *ngFor="let customer of customerData">
    <h1>Welcome to your loan <br/> application, {{customer.name}}</h1>
    <h4>Your RM today is Sandra Menter.</h4>
  </div>
</section>

Most likely this.customerData is not an array, but an object. You should have something like let customer of customerData.xxx where xxx is the name of the array you can see in the customerData — Jacopo Sciampi
– Jacopo Sciampi, Commented Apr 16, 2019 at 7:40
{rCode: 0, customer: {…}} customer: emails: [{…}] name: "Yobfh" surname: "Yqbxiy" proto: Object rCode: 0 proto: Object — ryy77
– ryy77, Commented Apr 16, 2019 at 7:51

bracco23 · Accepted Answer · 2019-04-16 08:05:54Z

1

ngFor is a construct used to replicate the tag for multiple elements, like if you have an array of customers. In your case, there is no need to use it, it should be as simple as:

<section class="hero">
  <div class="content-hero">
    <h1>Welcome to your loan <br/> application, {{customerData.customer.name}}</h1>
    <h4>Your RM today is Sandra Menter.</h4>
  </div>
</section>

answered Apr 16, 2019 at 8:05

bracco23

2,23114 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'(Angular)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related