ListPicker json array


#1

right now the list picker just shows [object Object]. I’d like it to display a list of the ‘type’ value but am not sure how to do that in the observable with .map or in the html? I don’t want to change the API server side. I’ve tried: [items]=“teamTypes.type” but that does not work.

    <GridLayout rows="auto, auto" sdkExampleTitle sdkToggleNavButton>
        <ListPicker 
            row="1" 
            [items]="teamTypes" 
            [selectedIndex]="selectedTeamTypeIndex" 
            (selectedIndexChange)="setTeamTypeSelected($event)" 
            class="picker">
        </ListPicker>
    </GridLayout>

getTeamTypes() {
    
    this.teamTypes = [];

    this.http.get(this.apiUrl.baseUrl + '/Teams/GetTeamTypes/')            
        .map(res => <any>res)            
        .subscribe(res => {
            this.teamTypes = res;                
        })
};  

json data that comes back from my API, set to teamTypes in observable:

[
{
“id”: 1,
“type”: “Automotive”
},
{
“id”: 2,
“type”: “Programming”
},
{
“id”: 3,
“type”: “Exercise”
},
{
“id”: 4,
“type”: “Parenting”
},
{
“id”: 5,
“type”: “Humor”
},
{
“id”: 6,
“type”: “Progress”
},
{
“id”: 7,
“type”: “Other”
}
]


#2

teamTypes supposed to be an array or an object defining length and getItem(index) method as mentioned here.

You can do something like this,

this.http.get(this.apiUrl.baseUrl + '/Teams/GetTeamTypes/')            
        .map(res => <any>res)            
        .subscribe(res => {
            this.teamTypes = {
                items: res,
                length: res.length,
                getItem: function(index) {
                    return this.items[index].type;
                }
            };                
        });

#3

Thank you very much.