how to display Multiple values from angular 4?

Question

I am using angular 4 and spring boot,i get all the record as a List from spring boot to angular 4 but in the angular form i get only single object data,how to list multiple values in Search box?

component.ts: In this component i am getting all the values but display single data!

characters=[]; chars=[];

 ngOnInit() {
    this.drugservice.getval().subscribe(
        data => {
            this.chars.data,
            this.characters = [
                {value: data[0].id},
                {label: data[0].name}
            ],
            alert(data[0].name)
        },
        err => {
            console.log('Error Occured ');
        });
}

ang.html:

<div class="col-sm-12 col-xl-4">            
   <ng-select [ngClass]="'ng-select'" [options]="characters"  formControlName="selectedCharacter"></ng-select>              
</div>

Back end rerun Object Values:

[
    {
        "id": 1,
        "name": "ak"
    },
    {
        "id": 2,
        "name": "java"
    }
]

I'm not entirely sure what your question is. You want to show all options in the <select>, or you only want to show the first result? Additionally, since your problem is frontend related, you don't need the spring-boot tag (even though the data may come from a Spring boot application). — Dimitri Mestdagh
– Dimitri Mestdagh, Commented Jan 12, 2018 at 8:02
I want to show list of values in <ng-select > but its shows only one record! i want to show multiple records?....@g00glen00b — Ajith Deivam
– Ajith Deivam, Commented Jan 12, 2018 at 8:43
I don't understand why you are trying to do but the part of your code data => { this.chars.data, this.characters = [ {value: data[0].id}, {label: data[0].name} ], alert(data[0].name) }, means nothing. — Alexandre Annic
– Alexandre Annic, Commented Jan 12, 2018 at 8:45
i am getting list of object stored in the 'data' and i going to store all the values to array[] of chars from the data,but i am getting single object data??...@ Alexandre Annic — Ajith Deivam
– Ajith Deivam, Commented Jan 12, 2018 at 8:54

Dimitri Mestdagh · Accepted Answer · 2018-01-12 09:14:26Z

There are several issues with your code, most of them within the subscribe() handler. First of all, the commas are making it very strange, but I guess that you're trying to do this:

this.drugservice.getval().subscribe(data => {
  this.chars.data, this.characters = [{value:data[0].id},{label:data[0].name}];
  alert(data[0].name);
});

One issue with this code is that you only use data[0], so if data contains multiple objects, you're only doing something with the first object. Probably, you want to do something like this:

this.drugservice.getval().subscribe(data => {
  this.characters = data.map(obj => ({ value: obj.id, label: obj.name }));
});

Or a more reactive way to do this would be:

this.drugservice
  .getval()
  .map(data => data.map(obj => ({ value: obj.id, label: obj.name })))
  .subscribe(data => this.characters = data);

By using the map() operator you can map all objects in the data array to the { value: ..., label: ... } structure.

And last but not least, if you're using ng-select, you should probably bind to items rather than to options:

<ng-select [ngClass]="'ng-select'" [items]="characters" 
           formControlName="selectedCharacter">                             
</ng-select>

But according to the documentation of ng-select, you don't need to map your objects to a certain structure as long as you provide the correct bindValue property, so you might want to take a look into that.

Collectives™ on Stack Overflow

how to display Multiple values from angular 4?

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