angular 8 - Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Question

I want to display search results, but whenever i am trying to type anything to search box it shows error in console. i am fetching data from api and according to type i am displaying results in tabs. data is getting filtered according to nav-tabs type. but now i want to search listed data, so whenever i am trying to search is shows error

TS -

  searchKeywords: string;
  CoffeeItemList: any = [];

  // tslint:disable-next-line:max-line-length
  constructor(private getDataListingService: DataListingService){}
  ngOnInit() {
    this.getGlobalSearchList('');
  }

  getGlobalSearchList(type: string) {
    this.CoffeeItemList = [];
    this.getDataListingService.getAllDataLists().subscribe(value => {
      let data = [];
      data = value.data;
      console.log(data);
      for (let i = 0; i < data.length - 1; i++) {
        if (data[i].type === type) {
            this.CoffeeItemList.push(data[i]);
        }
    }
    });
  }
  getSmartSearchValues(search: string) {
    if (search === '' ) {
      this.getGlobalSearchList('');
      return false;
    }
    this.getDataListingService.searchList(search).subscribe((data: any) => {
      this.CoffeeItemList = data;
    });

HTML

    <div class="container">
  <div class="mt-4">
    <input  class="form-control" type="text" [(ngModel)]="searchKeywords" (keyup)="getSmartSearchValues(searchKeywords)" placeholder="Search here"/>
  </div>
  <br>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Coffee')">Coffee</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Brewer')">Brewer</a>
    </li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div id="list" class="tab-pane container active in"><br>
      <div class="row">

      <div class="card col-3" *ngFor="let items of CoffeeItemList">
        <div class="card-body">
          <h5 class="card-title">{{items?.title }}</h5>
          <img src="http://infogainpune.com{{items.image |slice:1}}" class="w-100"/>
          <p class="card-text">{{items?.content}}</p>
          <h4 class="card-text">${{items?.price}}</h4>
          <h4 class="card-text">{{items?.type}}</h4>
        </div>
      </div>
    </div>
    </div>
  </div>
</div>

The response of data

@tony ngo - can you please share updated code which you have posted — Pratiksha Kale
– Pratiksha Kale, Commented Feb 12, 2020 at 6:56

Tony · Accepted Answer · 2020-02-12 06:59:12Z

1

Try to change your code like this too see if it work for you

this.getDataListingService.getAllDataLists().subscribe(value => {
      this.CoffeeItemList = value.data;
});

Let me know if you still have a problem.

answered Feb 12, 2020 at 6:59

Tony

20.3k7 gold badges42 silver badges62 bronze badges

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

Collectives™ on Stack Overflow

angular 8 - Error trying to diff '[object Object]'. Only arrays and iterables are allowed

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