Angular not displaying data received from http response

Question

I have a Service type script class as follows:

export class HomeApiService{

apiURL = 'http://localhost:8080/api';

constructor(private http: HttpClient) {}

getProfileData():Observable<HomeModelInterface[]>{
        return this.http.get<HomeModelInterface[]>(this.apiURL+'/home');}
}

I have component class as follows:

export class HomeComponent implements OnInit {

public profileData: HomeModelInterface[] | undefined ;

constructor(private homeApiService:HomeApiService) { }

ngOnInit() {
 this.homeApiService.getProfileData().subscribe(data=> {
   this.profileData = data;
   console.log(this.profileData);
});
}

I have html file as follows:

<div *ngFor="let profile of profileData">
 <h1>{{profile.data}}</h1>
</div>

Here is the backend spring boot application controller:

@RequestMapping(value = "/api/home" , method = RequestMethod.GET, produces = 
  "application/json")
 public Object getHome() {
    ResponseHome response = new ResponseHome();
    response.setData(new String[]{"Greetings from Spring Boot API home!", 
  HttpStatus.ACCEPTED.toString()});
    return response;
   }

Here is my ResponseHome java class:

public class ResponseHome {

private String data[];
private String errors[];

public String[] getData() {
    return data;
}

public void setData(String[] data) {
    this.data = data;
}

public String[] getErrors() {
    return errors;
}

public void setErrors(String[] errors) {
    this.errors = errors;
}
}

Here is my frontend model typescript class to parse that json to a model class:

export interface HomeModelInterface{
data: string[];
errors: string[];
}

When i run it chrome i see the following error: Cannot find a differ supporting object '[object Object]' of type 'object'

Can you please help?

Answer 1

Your data is an object not an array. In order to iterate, you should get the list that's in it. Try something like profileData.data in *ngFor.