Nativescript drop down plugin display only Object object instead of value - nativescript

Question

I'm trying to display object value in drop down, and want to get the entire object value when i select any of the value. How do I set that?
I'm trying to access the Object value to display by using "." operator like below
<dd:DropDown items="{{ raw_material_list.productName }}" selectedIndex="{{ raw_material_index }}" opened="dropDownOpened" closed="dropDownClosed" selectedIndexChanged="dropDownSelectedIndexChanged" class="dropDownStyle" />
Data which I'm passing is like below
raw_material_list = [
{
"id": "44",
"created_date": "2019-04-19 12:01:13",
"activeFlag": "true",
"productType": "purchase",
"productName": "suraksha",
},
{
"id": "43",
"created_date": "2019-04-19 11:59:59",
"activeFlag": "true",
"productType": "purchase",
"productName": "vajra",
}
];
I need to get the result exactly like i mentioned, any help is welcome.

Answer 1

I have updated your playground here
Changed the display to productName in drop-down-common.js
ValueList.prototype.getDisplay = function (index) {
if (types.isNullOrUndefined(index)) {
return null;
}
if (index < 0 || index >= this.length) {
return "";
}
return this._array[index].productName;
};
P.S. You must use ValueList for the Object.

Answer 2

the above answer was right, but for the question the very easy and straight forward solution is
var nativescript_drop_down_1 = require("../nativescript-drop-down") //Plugin
1> modify the array list like below
raw_material_list = new nativescript_drop_down_1.ValueList([
{
"id": "44",
"created_date": "2019-04-19 12:01:13",
"activeFlag": "true",
"productType": "purchase",
"productName": "suraksha",
},
{
"id": "43",
"created_date": "2019-04-19 11:59:59",
"activeFlag": "true",
"productType": "purchase",
"productName": "vajra",
}
]);
2>to access data
let obj = viewModel.get("raw_material_list")._array[viewModel.get("raw_material_index")];
console.log("----obj-----");
console.log(obj);