Data fetched from API is not showing in Angular

Question

I am fetching data from SQL server through a back-end API in asp.net, and everything is going well I am fetching the data as well but it's not showing on the screen only in the console here is a picture to understand what I am trying to achieve

Picture

Here is my .service:

GetCategories(): Observable<any> {
    return this.http.get<any>(this.BaseUrl);
    // return this.afs.collection<any>('Categories').valueChanges();
  }

and here is my .ts :

GetCategories() {
    this.api.GetCategories().subscribe({
      next: (Categ) => {
        this.categories = Categ;
        console.log(this.categories);
      },
      error: (err) => {
        console.log(err);
      },
    });
  }

and my .HTML :

<mat-form-field fxLayoutAlign="center center" (click)="GetCategories()">
      <mat-label> Filter by Categories</mat-label>
      <mat-select (selectionChange)="FilterCateg($event)">
        <mat-option
          *ngFor="let Categ of categories"
          [value]="Categ.categories"
          class="DropDown-color"
        >
          {{ Categ.categories }}
        </mat-option>
      </mat-select>
    </mat-form-field>

From my experience it should be displaying but I don't know what I am doing wrong, thanks for help in advance.

Categ.categories is suspicious, since Categ will hold just one category. create a model interface, then you can get rid of the anys and have intellisense on your objects — Cee McSharpface
– Cee McSharpface, Commented Jan 12, 2023 at 18:59

Cee McSharpface · Accepted Answer · 2023-01-12 19:00:55Z

1

Instead of {{ Categ.categories }}, according to the data shown in your screenshot, you're dealing with a single category at this point. Thus it should be {{ Categ.categoryName }} instead.

And likewise, [value]="Categ.categories" should be [value]="Categ.categoryID".

answered Jan 12, 2023 at 19:00

Cee McSharpface

8,7133 gold badges43 silver badges90 bronze badges

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

1 Comment

Firefly0027 Over a year ago

thank you, i haven't noticed that I was passing two values on my drop-down list , silly me

Fredy Lemus · Accepted Answer · 2023-01-12 20:07:03Z

0

The error is in the html template, in there you use Categ.categories but probably categories no is a key in your Categ object.

You can see on your console.log(this.categories) the objects elements and decide which you want use to renderize in your template or binding in somewhere else.

answered Jan 12, 2023 at 20:07

Fredy Lemus

843 bronze badges

Collectives™ on Stack Overflow

Data fetched from API is not showing in Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related