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

Question

I've created an angular app which gets data from a local json file. But I'm having issues with showing the data in html. A lot of variables are in dutch, I'm sorry for that, I'm a bit new to all of this :)

This is my service:

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
import { City } from './city';

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

  citiesListUrl = "assets/city.list.json";
  constructor(private http: HttpClient) {
  }

  public getCities(): Observable<HttpResponse<City[]>>{
    return this.http.get<City[]>(this.citiesListUrl, {observe: 'response'})
                    .pipe(retry(3), catchError(this.handleError)
    );
  }
}

This is the component:

import { Component, OnInit, HostListener } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { WeatherService} from './weather.service';
import { Observable } from 'rxjs';
import { City } from './city';

@Component({
  selector: 'app-weather',
  templateUrl: './weather.component.html',
  styleUrls: ['./weather.component.css'],
  providers: [WeatherService]
})
export class WeatherComponent implements OnInit {
  public cities:City[];
  headers;
  error;

  constructor(private weatherService: WeatherService) { }

  public getCities(){
    this.weatherService.getCities()
      .subscribe(resp => {
        // display its headers
        const keys = resp.headers.keys();
        this.headers = keys.map(key =>
          `${key}: ${resp.headers.get(key)}`);

        // access the body directly.
        this.cities = { ... resp.body }},
        error => this.error = error);
  }

  ngOnInit() {
    this.getCities();
  }

}

And this is HTML code:

<div class="row">
  <div class="col">
      <ul>
          <li *ngFor="let ci of cities">
              {{ci.name}}
          </li>
      </ul>
  </div>
</div>

I´ve tried with another answer they´re Angular 4 develop thought, they didn´t work over my code. I´ve tried with async pipe too but it works.

Pardeep Jain · Accepted Answer · 2018-06-13 09:36:30Z

3

this.cities = { ... resp.body }},

This should be

this.cities = [ ... resp.body ]

As error stated that *ngFor will only iterate over the array not on object so you need to push your JSON data into array as I mentioned.

answered Jun 13, 2018 at 9:36

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

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

4 Comments

Francisco Pizarro Over a year ago

Oh yes! It works, thanks a million Pardeep!! I spent the whole day with it yesterday

Pardeep Jain Over a year ago

Glad to know :)

Pardeep Jain Over a year ago

you can appericiate my answer with upvote and green tick :P

Francisco Pizarro Over a year ago

Sure, I´m just waiting for the page allow it ;-)

Rajesh Rajoji · Accepted Answer · 2018-10-03 12:39:22Z

0

[https://forum.ionicframework.com/t/solved-ngfor-only-supports-binding-to-iterables-such-as-arrays/59597/9]

this solved my issue

 getBooks() 
      {
        this.isbnsource.getBooks(this.isbn).subscribe(
          data => { this.foundBooks = data.json();
     this.foundBooks = Array.of(this.foundBooks); 
           },
          err => console.error(err), `enter code here`
          () => console.log('getBooks completed') 
          );
     }

answered Oct 3, 2018 at 12:39

Rajesh Rajoji

115 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related