NativeScript Core
In this article
API Reference
Not finding the help you need?
Ask the community Improve this article

Observable Array

The ObservableArray module expands the Array class by providng a capability of detecting and responding to changes of a collection of objects. The ObservableArray supports the known methods like concat, push, reduce, slice, splice, reverse and many more (full list here).

Basics

ObservableArray Module Import

Using the ObservableArray requires the related module.

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

Creating an ObservableArray

Creating an ObservableArray with different class constructors.

// Create ObservableArray with lenght
let myObservableArray = new ObservableArray(10);

// Create ObservableArray from array.
const arr = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34];
myObservableArray = new ObservableArray(arr);
// Create ObservableArray from arguments.
myObservableArray = new ObservableArray(1, 2, 3, 5, 8, 13, 21, 33, 55, 89);

Get, Set and Push Array Item

One difference with the base array implementation is in the way the items are accessed through their index. While in the common JS array we would do array[index] with an ObservableArray we need to use getItem(index) method.

const firstItem = myObservableArray.getItem(0);
const secondItem = myObservableArray.getItem(1);
const thirdItem = myObservableArray.getItem(2);

Setting item at specified index using setItem(index, item) method.

myObservableArray.on(ObservableArray.changeEvent, (args) => {
    console.log(args.index); // Index of the changed item (in this case 7).
    console.log(args.action); // Action (In this case "update")
    console.log(args.addedCount); // Number of added items (In this case 1).
    console.log(args.removed); // Array of removed items (in this case 33).
});
myObservableArray.setItem(7, 34); // at seventh (7) index setting value of 34

Using push(item) method to add single element to the array.

myObservableArray.push(144);

Using push() method to add multiple elements from source array to the ObservableArray.

myObservableArray.push([377, 233]);

Reverse, Shift, and Sort operations

Using reverse() method to reverse the elements order of the ObservableArray.

myObservableArray.reverse();

Using shift() method to remove the first element of the array.

myObservableArray.shift();

Using sort() method to sort the array. This method can accept a comparing function.

myArray.sort();

Getting Item Index

Using indexOf(item) method to get the index of the desired item in the array.

const index = myObservableArray.indexOf(13);
console.log(index);

Improve this document

Demo Source