Bind json data to dropdownlist in Webix

Question

I have one API which return json data. I want to bind "id" and "first_name" in dropdownlist view using Webix? Please suggest me how to bind data?

Below is my code and json sample data.

webix.ajax("https://reqres.in/api/users", function (text, data) {

                                    webix.message(text.json()); //verify data
                                        });

Sample json data. {"page":1,"per_page":3,"total":12,"total_pages":4,"data":[{"id":1,"first_name":"George","last_name":"Bluth","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"}, {"id":2,"first_name":"Janet","last_name":"Weaver","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"},{"id":3,"first_name":"Emma","last_name":"Wong","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"}]}

Answer 1

You can load data like

var data = webix.ajax("https://reqres.in/api/users");

and later use it in combo | richselect

webix.ui({ view:"combo", options:{ data: data }})

As your data doesn't have "value" property, you need to define which values to render in the control, it can be done like next

view:"combo", options:{
body:{
    data:data,
    scheme:{
        $init: obj => {
            obj.value = obj.first_name +" "+ obj.last_name
        }
    }
}
}

https://snippet.webix.com/33t0xbnz