Add values from API call to dropdown Angular

Question

I'm facing a problem while I want to display some values which I got from a API call in a dropdown in the fronted.

I call my endpoint like this:

component.ts

ngOnInit() {
  const values = this.backendService.getAllValues().subscribe()
}

The call works, I get the following output:

0: {name: "Data Visualisation",…}
 name: "Data Visualisation"
1: {name: "Watchning TV",…}
 name: "Watchning TV"

Now, I d'like to display those values in my dropdowon:

component.html

<scs-dropdown>
   <scs-dropdown-item *ngFor="let value of values" [value]="value.name">
   </scs-dropdown-item>
</scs-dropdown>

But nothing is displayed in the dropdown, what do I wrong?

can you create a stackblitz for the same

Amit
– Amit

2020-05-20 15:19:11 +00:00
Commented May 20, 2020 at 15:19 — Amit
– Amit, Commented May 20, 2020 at 15:19

Alan Grosz · Accepted Answer · 2020-05-20 15:46:04Z

2

That's not how you should set the values attribute. It should be like this:

values = [];

ngOnInit() {
    this.backendService.getAllValues().subscribe(response => {
        this.values = [];
        for (const item in response) {
            this.values.push(item);
        }
    });
}

Look that values is a class attribute, not a variable defined in ngOnInit

edited May 20, 2020 at 15:46

answered May 20, 2020 at 15:19

Alan Grosz

1,33511 silver badges16 bronze badges

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

5 Comments

roland Over a year ago

Thanks for your answer. Unfortunately it doesn't work. I got this error message:

Type 'Object' is not assignable to type 'never[]'.   The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?ts(2322)

Alan Grosz Over a year ago

This is because your response is not an array. You should convert to an array before assign to this.values

roland Over a year ago

where should I define the item?

roland Over a year ago

With this solution I got the error: Argument of type 'string' is not assignable to parameter of type 'never'

Alan Grosz Over a year ago

Can you tell me what shows when you add console.log(response) at the beginning?

Shane Code · Accepted Answer · 2020-05-20 15:20:12Z

0

The Values you get from the API Must be mapped into an Array using the ' .map => ' operator then once mapped you can loop through the values on the interface

answered May 20, 2020 at 15:20

Shane Code

316 bronze badges

1 Comment

Marc Over a year ago

I think that your answer is wrong. The return type of the api call is an array.. This return type is an Subscription: this.backendService.getAllValues().subscribe()

Marc · Accepted Answer · 2020-05-20 15:39:57Z

0

Please try this and show us the console output:

values = [];

ngOnInit() {
  this.backendService.getAllValues().subscribe( arr => {
      console.info(JSON.stringify(arr, null, 4));
      values = arr
  });
}


<scs-dropdown>
   <scs-dropdown-item *ngFor="let value of values" [value]="value.name">
      {{value.label}} :-)
   </scs-dropdown-item>
</scs-dropdown>

See: https://angular.io/guide/observables-in-angular

Don't forget to unsubscribe.

edited May 20, 2020 at 15:39

answered May 20, 2020 at 15:24

Marc

1,8961 gold badge11 silver badges16 bronze badges

1 Comment

roland Over a year ago

Thanks for your answer. Unfortunately it doesn't work. I got this error message: Type 'Object' is not assignable to type 'never[]'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?ts(2322)

Collectives™ on Stack Overflow

Add values from API call to dropdown Angular

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related