Get array from response instead of Object

Question

I am trying to get only specific items from my database then display it in table.

This is how my sql query looks like

public async aliasesListByDomain(req: Request, res: Response): Promise<void> {
    const { domain } = req.params;
    const aliases = await pool.query('SELECT * FROM virtual_aliases INNER JOIN virtual_domains ON virtual_aliases.domain_id = virtual_domains.id WHERE virtual_aliases.domain_id = ?', [domain]);
    if (aliases.length > 0) {
        res.json(aliases);
    } else {
        res.status(404).json({ message: "Alias doesn't exists" });
    }
}

There is my Aliases.service

 getAliasesByDomain(domain: string): Observable<Alias> {
    return this.http.get(`${this.API_URI}/aliases/aliaseslistbydomain/${domain}`);
  }

And there is my component

 getAliasesByDomain() {
    const token = this.getToken();
    let user;
    let domain;
    console.log(token);
    if(token){
      user = token.split('.')[1];
      user = window.atob(user);
      user = JSON.parse(user);
      domain = user.domain;

    }
    this.aliasesService.getAliasesByDomain(domain).subscribe(
      res => {
        this.alias = res;
      },
      err => console.error(err)
    );
  }

and component html

<tr *ngFor="let aliases of alias;">

My problem is that I got error:

AliasesListComponent.html:17 ERROR Error: Cannot find a differ supporting object 'to sa aliases: [object Object],[object Object]' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

Because my response is Object object instead of array. How can I parse this?

You could use the map rxjs operator in your service call and parse the data if it is of type Object object. — Pedro Bezanilla
– Pedro Bezanilla, Commented Dec 3, 2019 at 14:20
Strongly recommend using plurals for lists and arrays, by using this.alias in the code above, you give the impression it contains only a single alias, not a list of aliases. But given your ngFor, it contains a list. So it should be aliases. — T.J. Crowder
– T.J. Crowder, Commented Dec 3, 2019 at 14:29

Alann · Accepted Answer · 2019-12-03 14:15:11Z

1

If your callback gives you an array you can just specify it inside the service like this

 getAliasesByDomain(domain: string): Observable<Alias[]> {
    return this.http.get<Alias[]>(`${this.API_URI}/aliases/aliaseslistbydomain/${domain}`);
  }

answered Dec 3, 2019 at 14:15

Alann

6575 silver badges19 bronze badges

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

3 Comments

Alann Over a year ago

I should have said that :) I won't do it again :)

T.J. Crowder Over a year ago

I also should have said: Nice one, thanks for posting it. :-) (That was my upvote, so maybe you figured it out, but still...)

Alann Over a year ago

Sorry english is not my native language ;)

Ezra · Accepted Answer · 2019-12-03 16:48:39Z

0

If the server's response does not match the data model you are expecting, you can transform the response using rxjs.

import { map } from 'rxjs/operators';

getAliasesByDomain(domain: string): Observable<Alias[]> {
    return this.http.get(`${this.API_URI}/aliases/aliaseslistbydomain/${domain}`).pipe(
        map((response: any) => {
            return transform(response);
        })
    );
}

transform(response: any): Alias[] {
    // your translation logic here
}

edited Dec 3, 2019 at 16:48

answered Dec 3, 2019 at 16:05

Ezra

8304 silver badges12 bronze badges

Collectives™ on Stack Overflow

Get array from response instead of Object

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related