Question: I'm trying to take a response and display the array on the page. There are no errors, but there also no list on the page.

My list is: `{"id":4,"content":"Hello, World! "}`

Here is my greeting-list.component.ts:

```
import { Component, OnInit } from '@angular/core';
import { GreetingService } from '../shared/greeting/greeting.service';
import { map } from "rxjs/operators"; 

@Component({
  selector: 'app-greeting-list',
  templateUrl: './greeting-list.component.html',
  styleUrls: ['./greeting-list.component.css']
})
export class GreetingListComponent implements OnInit {
  greetings: Array<any>;

  constructor(private greetingService: GreetingService) { }

  ngOnInit(): void {
    //this.greetingService.getAll().subscribe(data => {
    //  this.greetings = data;
    //});
    this.greetingService.getAll().pipe(map(data => {
      this.greetings = [data];
    }));

  }

}

```

I originally had:

```
    //this.greetingService.getAll().subscribe(data => {
    //  this.greetings = data;
    //});

```

but I was getting an error `Angular: 'Cannot find a differ supporting object '[object Object]' of type 'object'` so I changed it to the code below it.

Here is my greeting-list.component.html:

```
<div *ngFor="let greeting of greetings">
  {{greeting.name}}
</div>

```

Answer: 
You have to subscribe to the observable:

```
 this.greetingService.getAll().pipe(map(data => {
   this.greetings = [data];
 })).subscribe();

```

Without subscribing the observable will never emit a value.
\*ngFor will only work with arrays (not objects or anything else)

if you are trying too iterate over an object use object.keys(yourbobject)
\*ngFor = "let greetingKey of Object.keys(greetings)"

```
<div *ngFor="let greeting of greetings">
  {{greeting[greetingKey].name}}
</div>

```

you will also need to add public object = Object; in your Component TS file