Angular 2 - ng-select - get datas from a JSON file

Question

I istalled the ng-select component that allow me to display an autocompleter in an editable select.

I tried to get the options of this select by a JSON but this doesn't work for me!

This work - component:

prodFilterDescr: Array<IOption> = [
        {label: 'Belgium', value: 'Belgium'},
        {label: 'Luxembourg', value: 'Luxembourg'},
        {label: 'Netherlands', value: 'Netherlands'}
    ];

Html:

        ...<ng-select
                [options]="prodFilterDescr"
                placeholder="Prodotto"
        >
        </ng-select>...

This doesn't work - component (in costructor):

        this.http.get('app/json/filtriProdotti.json')
        .subscribe(res => this.filters = res.json());
        var filter = [];
        this.filters.forEach(function(item){
            filter.push(item.tipoProdottoId)
        })  
        console.log(filter)   
        let typeProdFilter: Array<IOption> = filter;
        console.log(typeProdFilter)

Html:

            <ng-select
                    [options]="typeProdFilter"

                    placeholder="Tipo prodotto"
            >
            </ng-select>

It seems can't read what wrote in costructor or other methods...how can I let my "options" reach my JSON data?

Vivek Doshi · Accepted Answer · 2017-07-24T09:15:17.843

2

Issue is related to async call of http.get method

Try to run this code :

// define this outside of constructor
typeProdFilter: Array<IOption>;

// keep this inside the constructor
this.http.get('app/json/filtriProdotti.json')
.subscribe(res => 
{
    this.filters = res.json()
    var filter = [];
    this.filters.forEach(function(item){
        filter.push(item.tipoProdottoId)
    })  
    console.log(filter)   
    this.typeProdFilter = filter;
    console.log(this.typeProdFilter)
});

For loading options dynamically please checkout this also :

https://basvandenberg.github.io/ng-select/examples/load-options

edited Jul 24 '17 at 09:15

answered Jul 24 '17 at 07:28

Vivek Doshi

56,649
12
110
122

This let my console show the array but I don't see anything in my select. – Jamil89 Jul 24 '17 at 09:06
Do you have jsfiddle for this ? – Vivek Doshi Jul 24 '17 at 09:08
Not atm...what you need more? I can post for you – Jamil89 Jul 24 '17 at 09:13
I need working example so i can debug it,beacuse the code I have provided should work , for more please check this out https://basvandenberg.github.io/ng-select/examples/load-options – Vivek Doshi Jul 24 '17 at 09:14
In really something changed, now I see 2 VOID options select (in my json I have just 2 options)...I see that ng select searching the VALUE of an object but i pushed just an array of value. Now i'm sure that se code needs to read something like key, value and not just an item – Jamil89 Jul 24 '17 at 09:32
Yes I replaced the content with "[ {label: 'Belgium', value: 'Belgium'}, {label: 'Luxembourg', value: 'Luxembourg'}, {label: 'Netherlands', value: 'Netherlands'} ];" and it works now. I have just to create an array of OBJECT and it will work. Thanks a lot for your solution! – Jamil89 Jul 24 '17 at 09:34
@Jamil89, anytime. :) . I am happy that you got the solution. – Vivek Doshi Jul 24 '17 at 09:35
It works thankt your post :) I have just to replace an array like ["1", "2"] with an array of object with 2 keys (label and value) – Jamil89 Jul 24 '17 at 09:41

Angular 2 - ng-select - get datas from a JSON file

1 Answers1