Angular front end does not recognize json response as an array

Question

While doing official Angular tutorial, I tried to make a real backend connection instead of mock Angular "server", using Spring JPA REST. REST endpoint is configured as PagingAndSortingRepository. Here is a server response from backend.

I try to get this data into front-end as follows:

@Injectable({
  providedIn: 'root'
})
export class HeroService {
  private heroesUrl = 'http://localhost:8080/api/heroes';

  constructor(
    private http: HttpClient,
    private messageService: MessageService ) { }

  getHeroes(): Observable<Hero[]> {
    // TODO: send the message _after_ fetching the heroes
    this.messageService.add('HeroService: fetched heroes');
    return this.http.get<Hero[]>(this.heroesUrl); // of(HEROES);
  }

HTML code:

<h2>My Heroes</h2>
<ul class="list-group">
  <li class="list-group-item" *ngFor="let hero of heroes">
    <a routerLink="/detail/{{hero.id}}">
      <span class="badge badge-dark">{{hero.id}}</span> {{hero.name}}
    </a>
  </li>
</ul>

This code produces following error:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

yes please show html and where you consume getHeroes() method — Mustahsan
– Mustahsan, Commented Sep 3, 2019 at 8:39

Sanket · Accepted Answer · 2019-09-03 08:45:44Z

1

The response from server contains _embedded as an object. Either you need to send it as array of "heroes" or on front end have heroes variable and assign it as

this.heroes = response._embedded.heroes;

Hope it helps.

edited Sep 3, 2019 at 8:45

answered Sep 3, 2019 at 8:43

Sanket

6326 silver badges23 bronze badges

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

Comments

Rahul Sharma · Accepted Answer · 2019-09-03 09:19:58Z

1

HTML use the async pipe

<table>
  <tr *ngFor="let item of getHeroes()|async">
     <td>{{item.id}}</td>
     <td>{{item.name}}</td>
  </tr>
</table>

get only heroes property from the response object using map operator.

getHeroes(): Observable<Hero[]> {
    // TODO: send the message _after_ fetching the heroes
    this.messageService.add('HeroService: fetched heroes');
    return this.http.get<any>(this.heroesUrl)
        .pipe(
            map(data => data._embedded.heroes)
        );
}

edited Sep 3, 2019 at 9:19

answered Sep 3, 2019 at 9:02

Rahul Sharma

10.1k1 gold badge20 silver badges41 bronze badges

3 Comments

Dmitry Over a year ago

Property _embedded does not exist on type Hero[]

Dmitry Over a year ago

Despite of error it works, thanx. But what is the reason for async?

Rahul Sharma Over a year ago

@Dmitry The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. check the link angular.io/api/common/AsyncPipe

Mustahsan · Accepted Answer · 2019-09-03 09:46:11Z

0

You are iterating an object {} in *ngFor. You should iterate over an array []

Suppose your json is saved in data Based on your json, it should be something like:

<table>
  <tr *ngFor="let item of data._embedded.heroes">
     <td>{{item.id}}</td>
     <td>{{item.name}}</td>
  </tr>
</table>

edited Sep 3, 2019 at 9:46

Mustahsan

3,8421 gold badge22 silver badges35 bronze badges

answered Sep 3, 2019 at 8:40

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Collectives™ on Stack Overflow

Angular front end does not recognize json response as an array

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related