Hello Team,
I am trying to populate data from REST URL into oj-select-single component.
I am using jet 12.0.0 version TempNavDrawer quick start template.
Here is my viewModel layer (TypeScript) code:
class populateLOVdata{
restServerURLMatTypes = "http://localhost:8080/ords/user1/ords_api/material_type_mst/";
materialTypeDP = ko.observableArray([]);
initialize = ko.observable(2);
constructor(){
var self = this;
var tempArray = [];
console.log("1 tempArray count: "+tempArray.length);
$.getJSON(this.restServerURLMatTypes).
then(function(data) {
$.each(data.items, function() {
tempArray.push({
'value': this.mtl_type_cd,
'label': this.mtl_type_desc
});
});
console.log("2 tempArray count: "+tempArray.length);
//this.materialTypeDP(tempArray);
let dataprovider = new ArrayDataProvider(tempArray, {keyAttributes: "mtl_type_cd"});
console.log("printing...."+dataprovider.fetchByKeys);
});
}
}
Invoked the above class constructor into CustomersViewModel constructor block:
x = new populateLOVdata();
##Here is my view layer (HTML) code:
<oj-label class="oj-label" for="createFld3">Material Type</oj-label> <oj-select-single id="createFld3" label-hint="Select Material Type" value="2" data="{{dataprovider}}"
##Error :
VM115:3 Uncaught (in promise) ReferenceError: Unable to process binding "_ojCustomElement: function(){const e=s.CustomElementUtils.isComposite(r),t=s.CustomElementUtils.isVComponent(r);return{skipThrottling:e||t}}"
Message: Unable to process binding "_ojCustomElement: function(){const e=s.CustomElementUtils.isComposite(r),t=s.CustomElementUtils.isVComponent(r);return{skipThrottling:e||t}}"
Message: dataprovider is not defined
at eval (eval at createBindingExpressionEvaluator (bundle.js:428:5610), <anonymous>:3:32)
at bundle.js:512:17621
at Function.yd (bundle.js:55:359)
at Function.zd (bundle.js:55:45)
at Function.ha (bundle.js:54:384)
at a.o.a.$ (bundle.js:52:147)
at bundle.js:512:17589
at Object.G (bundle.js:41:458)
at w.setupPropertyBinding (bundle.js:512:17552)
at bundle.js:512:23568
bundle.js:685 Uncaught JetElementError: oj-dialog with id 'createDialog': Cannot access methods before element is upgraded.
at _WIDGET (bundle.js:685:28984)
at DefineMethodCallback.t.<computed> [as open] (bundle.js:685:25035)
at showCreateDialog (rawmat_master.js:1:7941)
at l.r (bundle.js:512:16331)
at bundle.js:598:8743
##Console output:
1 tempArray count: 0
rawmat_master.js:1 2 tempArray count: 6
rawmat_master.js:1 printing....fetchByKeys(s){this._generateKeysIfNeeded();const i=new e,n=this._getKeys(),r=null!=s?s[a._ATTRIBUTES]:null;let l,o=0;if(s){const e=this._getRowData();return s[a._KEYS].forEach(s=>{for(l=null,o=0;o<n.length;o++)if(t.Object.compareValues(n[o],s)){l=o;break}if(null!=l&&l>=0){let t=e[l];if(r&&r.length>0){const e={};this._filterRowAttributes(r,t,e),t=e}i.set(s,new this.Item(new this.ItemMetadata(s),t))}}),Promise.resolve(new this.FetchByKeysResults(s,i))}return Promise.reject("Keys are a required parameter")}
As you can see that tempArray is getting populated from REST URL as can see array length printed as 6. But somehow it is not able to bind to the oj-select-single web component.
Can someone help identify what is wrong in the code here?