Empty Data DropDown on IOS

[hasbyalkaff]

Im so sorry, if my english so bad :')

i am working with nativescript-drop-down plugin for some project Android. When i try to run it on IOS, i got empty data on it. But when i try on Android, it works perfectly.

Here my code: my.xml <dd:DropDown items="{{ listRooms }}" selectedIndex="{{ selectedIndex }}" opened="dropDownOpened" class="dd" />

my.js

function onNavigatedTo(args){
    page = args.object;
    viewModel = new observable.Observable();
    page.bindingContext = viewModel;
    setListRooms();
}

function setListRooms(){
    loader.show(getLoaderOptions());
    var items = new observableArray.ObservableArray();
    user.getAvailableRooms().then(function(rooms){
        itemSource = rooms;
        for(var loop=0; loop<rooms.length; loop++)
            items.push(rooms[loop].nmroom.toString());

        viewModel.set("listRooms", items);
        loader.hide();
    });
}

exports.onNavigatedTo = onNavigatedTo;
exports.dropDownOpened = setListRooms;

Is something wrong ?

[PeterStaev]

@hasbyalkaff from what I see you do not init your observable with any properties before you set it as a bindingContext. Please refer to https://docs.nativescript.org/cookbook/data/observable or take a look at the demo apps in this repo.

If you still have problems, please provide a playground/demo with your full code.

[hasbyalkaff]

i already change line on bindingContext, so it will init first, before set it as bindingContext, but it still get null. I got 4 value for my dropdown ["This is 1st Room", "This is 2nd Room", "This is 3rd Room", "This is 4th Room"]

this is result for my Android App

and i got nothing for my IOS App, also the style turn into black.

i use nativescript-drop-down on "Pilih Room" option.

Here my full code. my.xml

<page actionBarHidden="true" navigatedTo="onNavigatedTo"
    xmlns:x="nativescript-statusbar"
    xmlns:dd="nativescript-drop-down">

    <x:status-bar ios:barStyle="light" barColor="#FFF" />

    <dock-layout class="pairing">
        <stack-layout class="top" dock="top" horizontalAlignment="center">
            <Image width="150" class="icon-top" src="~/images/logo.png" />
        </stack-layout>

        <stack-layout verticalAlignment="center">
            <label text="Pilih Room" />
            <dd:DropDown items="{{ listRooms }}" selectedIndex="{{ selectedIndex }}" opened="dropDownOpened" class="dd" />
            <label text="Nomor Kursi" />
            <TextField hint="Masukkan Nomor" id="kode" />
            <label text="Nama" />
            <TextField hint="Nama Anda" id="nama" />
            <button text="Go" tap="onPairing" /> 
        </stack-layout>
    </dock-layout>
</page>

my.js

var UserModel = require("../../shared/moza-view-model");
var frames = require("ui/frame");
var dropDown = require("nativescript-drop-down");
var observable = require("data/observable");
var observableArray = require("data/observable-array");

var page;
var viewModel, itemSource, user = new UserModel();

function onNavigatedTo(args){
    page = args.object;
    viewModel = new observable.Observable();
    setListRooms();
    page.bindingContext = viewModel;
}

function onPairing(){
    var selectedRoom = viewModel.get("selectedIndex");

    var room = (itemSource[selectedRoom].id);
    var kode = page.getViewById("kode");
    var nama = page.getViewById("nama");

    var data = JSON.stringify({
        idroom: room,
        code: kode.text,
        name: nama.text
    });

    loader.show(getLoaderOptions());
    user.pairing(data).then(function (message) {
        loader.hide();
        if(message.statusCode == 1)
            frames.topmost().navigate("views/jawab/jawab");
        else if(message.statusCode == -1)
            alert("Kode tersebut sudah diambil");
        else if(message.statusCode == 0)
            alert("Kode yang Anda masukkan salah.");
        else 
            alert(message.statusCode);//alert("Gagal menghubungkan. Periksa koneksi internet Anda");
    });
}

function setListRooms(){
    loader.show(getLoaderOptions());
    var items = new observableArray.ObservableArray();
    user.getAvailableRooms().then(function(rooms){
        itemSource = rooms;
        for(var loop=0; loop<rooms.length; loop++)
            items.push(rooms[loop].nmroom.toString());

        viewModel.set("listRooms", items);
        loader.hide();
    });
}

exports.onNavigatedTo = onNavigatedTo;
exports.onPairing = onPairing;
exports.dropDownOpened = setListRooms;

thank you for your response :')

[PeterStaev]

@hasbyalkaff , you are not initializing the properties of the viewModel, because you have async data that is not loaded right away. So moving the load before the set of the bindingContext does not achieve anything. Try this:

function onNavigatedTo(args){
    page = args.object;
    viewModel = new observable.Observable();
    viewModel.set("items", []);
    viewModel.set("selectedIndex", null);
    setListRooms();
    page.bindingContext = viewModel;
}

[hasbyalkaff]

i have tried that.. and still get same result ...

[PeterStaev]

I cannot simulate this. See a working playground: https://play.nativescript.org/?template=play-js&id=PPZxcd&v=3

[hasbyalkaff]

it works properly when i try to run using that playaround.

After i recheck step by step my code, i found the problem. the problem is when i want to get data from server, its failed. When i try to view that error message, I got a message :

the resource could not be loaded because the app transport security policy requires the use of a secure connection

After i check comment @tsonevn on #https://github.com/NativeScript/NativeScript/issues/3292, The http request has been forbidden by default. So i add following lines to my <project_name>/app/App_Resources/iOS/Info.plist file:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

It works. But, I dont know its secure or not.

[PeterStaev]

It is not secure, and you should only use that for development. Also Apple tends to decline store request that have arbitrary loads set.

[hasbyalkaff]

hmm.. i see...

Ok, ty for all your help @PeterStaev sorry for taking your time. :')