Nativescript drop down plugin display only Object object instead of value

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.

are you using https://www.npmjs.com/package/nativescript-drop-down ? — Narendra, May 10 '19 at 05:29
@Narendra no i dont want to change the key name. because i'm reading it from DB and passing. so i dont want to add display. — vikas acharya, May 10 '19 at 05:30
It is possible but you have to modify copy of your plugin https://github.com/PeterStaev/NativeScript-Drop-Down/blob/master/drop-down-common.ts#L79 — Narendra, May 10 '19 at 05:36
@Narendra thank you for your reply. but i kindly request you to modify this playground sample. as i'm not able to achieve the solution by above mentioned links. https://play.nativescript.org/?template=play-js&id=oByKwD the sample includes demo which is working fine on any android devices which i tested. — vikas acharya, May 10 '19 at 05:40

score 1 · Answer 1 · answered May 10 '19 at 06:04

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.

answered May 10 '19 at 06:04

Narendra

4,514
2
21
38

i'm not getting why it is displaying items. instead of the data which i gave. the solution u gave makes me more confused. you have changed display to this._array[index].productName , and the binding in dropdown you changed it from raw_material_list to items. but i'm not getting where this items is coming from. – vikas acharya May 10 '19 at 06:16
for (var loop = 0; loop < 200; loop++) { items.push({ value: "I" + loop, productName: "Item " + loop }); // Here iam trying to extract the value. } – Narendra May 10 '19 at 06:17
I have added them in home-page.js – Narendra May 10 '19 at 06:17

score -1 · Accepted Answer · answered May 12 '19 at 06:41

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);

Your answer is the extension of my answer only. You can't just convert your array to ValueList and get the desired untill you change the local copy of show `display` to `productName`. — Narendra, May 13 '19 at 03:59

Nativescript drop down plugin display only Object object instead of value

2 Answers2