How to fix "Cannot find a differ supporting object "

Question

I want to display date from mySql table.

I got api which gets from DB actual table.

This is my service (auth.service.ts)

getAliases(): any {
    this.loadToken();
    const headers = new HttpHeaders({
      Authorization: this.authToken,
      'Content-Type': 'application/json'
    });
    return this.http
      .get('http://localhost:8080/aliases/aliases', { headers: headers })
      .pipe(map(res => res));
  }

This is my aliases.js

router.get('/aliases', function (req, res) {
    con.query('SELECT * FROM virtual_aliases', function (error, results, fields) {
        if (error) throw error;
        return res.send({ error: false, data: results, message: 'aliasy.' });
    });
});

This is my component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'app/services/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html'
})
export class DashboardComponent implements OnInit {
  aliases: any = {};

  constructor(private authService: AuthService, private router: Router) { }

  ngOnInit() {

    this.getAliases();
  }

   getAliases() {
    this.authService.getAliases().subscribe(
      res => {
        this.aliases = res;
        console.log(this.aliases);
      },
      err => console.error(err)
    );
  }
}

and my component.html

<table border='1' width='100%' style='border-collapse: collapse;'>
    <tr>
      <th>ID</th>
      <th>DOMAIN_ID</th>
      <th>SOURCE</th>
      <th>DESTINATION</th>

    </tr>

    <tr *ngFor="let aliases of aliases">
      <td>{{ id }}</td>
      <td>{{ domain_id }}</td>
      <td>{{ source }}</td>
      <td>{{ destination }}</td>
      <td>
      </td>
    </tr>
  </table>

I want to display everything from my table.

Output from my Api is Json like:

{
  "error": false,
  "data": [
    {
      "id": 1,
      "domain_id": 1,
      "source": "test@testone.com",
      "destination": "dest@testone.com"
    },

and there is an error from console

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

What your console log shows for `this.aliases`? – Maihan Nijat Jun 17 '19 at 12:15 — Maihan Nijat, Jun 17 '19 at 12:15

score 2 · Accepted Answer · edited Jun 17 '19 at 12:14

2

You need to access the data property of the response which is an array,

this.aliases = res.data;

edited Jun 17 '19 at 12:14

Maihan Nijat

9,054
11
62
110

answered Jun 17 '19 at 12:13

Sajeetharan

216,225
63
350
396

it works. But still got error [object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. – Mark Zacharski Jun 17 '19 at 12:29

How to fix "Cannot find a differ supporting object "

1 Answers1