Доступ к значениям объекта из ObservableArray и отображение их в метке

Question

У меня проблемы с доступом к значениям объектов, хранящихся в ObservableArray:

const observable = require("tns-core-modules/data/observable");
const ObservableArray = require("tns-core-modules/data/observable-array").ObservableArray;

var myArray = new ObservableArray([]);

var pageData = observable.fromObject({
    myArray: myArray
});

exports.onLoad = function (args) {
    const page = args.object;
    page.bindingContext = pageData;
    // a Bluetooth plugin returns a peripheral object
    myArray.push(peripheral);
    //console.log(Object.keys(peripheral));
}

Функция console.log() печатает объект peripheral следующим образом:

JS: [type, UUID, name, RSSI, state, advertisement, manufacturerId, manufacturerData]

Это мой XML-файл:

<Page loaded="onLoad">
    <ListView items="{{ myArray }}">
        <ListView.itemTemplate>
            <StackLayout>
                <Label text="{{ peripheral['UUID'] }}"/>
            </StackLayout>
        </ListView.itemTemplate>
    </ListView>
</Page>

Элементы ListView загружаются просто отлично, но я не могу заставить Label показывать какое-либо значение периферийного объекта. Я почти уверен, что синтаксис peripheral['UUID'] неправильный, но я не могу найти информацию о том, как получить доступ к этим данным ...

Буду признателен за любую помощь или указатели в правильном направлении.

Answer 1

Хорошо, после небольшого количества кофе и проб и ошибок решение довольно простое:

<Page loaded="onLoad">
    <ListView items="{{ myArray }}">
        <ListView.itemTemplate>
            <StackLayout>
                <!-- just using 'UUID' here -->
                <Label text="{{ UUID }}"/>
            </StackLayout>
        </ListView.itemTemplate>
    </ListView>
</Page>

Видимо, значения объектов в ObservableArray просто видны в файле XML.Вам просто нужно использовать имя значения, в моем случае это было UUID или name.

Я явно должен прочитать механику, лежащую в основе наблюдаемых, сейчас мне это кажется волшебством.

Answer 2

peripheral было просто именем вашей переменной, которое не существует в массиве. Просто свяжите UUID.

<Page loaded="onLoad">
<ListView items="{{ myArray }}">
    <ListView.itemTemplate>
        <StackLayout>
            <Label text="{{ UUID }}"/>
        </StackLayout>
    </ListView.itemTemplate>
</ListView>
</Page>