Oracle JET : How to populate a Combobox from a REST service

We can statically populate a combobox in the HTML as shown in the cook book :

 <oj-combobox-one id="combobox" value="{{val}}"
            style="max-width:20em">
            <oj-option value="Internet Explorer">Internet Explorer</oj-option>
            <oj-option value="Firefox">Firefox</oj-option>
            <oj-option value="Chrome">Chrome</oj-option>
            <oj-option value="Opera">Opera</oj-option>
            <oj-option value="Safari">Safari</oj-option>
          </oj-combobox-one>

However if the option list is long and if we would want to source it from a REST service.

Please note that I would not confirm this is the best way to fetch, however this worked for me and performance wise also its not bad.

To do this we would need to create a new helper javascript file apart from the JET component ( .html and .js )

A. Lets say we want to populate the Colours LOV. Create a new .js viewModel as below :
     Write the code to fetch from Colours REST url. The main method is the fetch() method highlighted in yellow : 


define(['ojs/ojcore', 'knockout', 'ojs/ojmodel', 'ojs/ojtable','ojs/ojcollectiontabledatasource',
        'jquery', 'ojs/ojbutton', 'ojs/ojinputtext'], function (oj, ko) {

    function coloursLOVHelperViewModule() {
        var self = this;
        
         self.urlcoloursLOVURL = ko.observable("YOUR URL ") ;

        self.coloursArray = ko.observableArray([]);
        self.ColoursLOVCol = ko.observable();
        self.ColoursLOVDataSource = ko.observable();
        
        self.fetch = function(successCallBack) {
                        // populate the collection by calling fetch()
                        self.ColoursLOVCol().fetch({
                        success: successCallBack,
                        error: function(jqXHR, textStatus, errorThrown){
                        console.log('WorkRequestIDHelper : Error in fetch: ' + textStatus);
                        }
                        });
                        };
        
        
        // Colours LOV
        parseColour = function (response) {
            if (response['items']) {
            var innerResponse = response['items'][0];
           
                    return {ColourId: innerResponse['ColourId'],
                            ColourName: innerResponse['ColourName']
                            };
            }            
            return {
                    ColourId: response['ColourId'],
                    ColourName: response['ColourName']
                  };
        };
        
         var ColourLOVModel  = oj.Model.extend({
                urlRoot: self.urlColoursLOVURL() , // urlWorkRequests,
                parse: parseColour,
                idAttribute: "ColourId"
            });     
        
         var myColourLOVModel = new ColourLOVModel();
            
         var collectionColoursLov = oj.Collection.extend({
                    url: self.urlColoursLOVURL(),
                    //fetchSize: -1,
                    model: myColourLOVModel
                });
                
         
         self.ColoursLOVCol(new collectionColoursLov());
         self.ColoursLOVDataSource(new oj.CollectionTableDataSource(self.ColoursLOVCol()));
}
    return new coloursLOVHelperViewModule();
});


B. Import the above .js in our main viewModel .js file :

define(['ojs/ojcore', 'knockout', 'viewModels/common/coloursLOVHelper',...)
], function (oj, ko, colourLOV )...........

C. Call the fetch method as below :

        self.colorsArray= ko.observableArray([]); 
       colourLOV.fetch(
                                function(collection, response, options)
                                    {
                                                                             
                                        if(self.colorsArray.length == 0) 
                                        {
                                            for (var i = 0; i < collection.size(); i++) 
                                            {
                                                var coloursModel = collection.at(i);
                                                self.colorsArray.push({value: coloursModel.attributes.colorId, label: coloursModel.attributes.colourName});
                                            }
                                        }
                                    }
                             )

D. Now in the main html page use the above populated array variable :

    <oj-combobox-one id="coloursCombobox" options="[[colorsArray]]" value="{{colorsSelectedValue}}" 

Hope this helps.
Srikanth