📺 "One project. One language. Three apps." Learn more in our upcoming code sharing webinar!

NativeScript Core

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

Using the ObservableArray requires the related module.

const ObservableArray = require("tns-core-modules/data/observable-array").ObservableArray;
import { ObservableArray, ChangedData } from "tns-core-modules/data/observable-array";

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

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);
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
myObservableArray.on(ObservableArray.changeEvent, (args: any) => {
    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);
myObservableArray.push(144);

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

myObservableArray.push([377, 233]);
myObservableArray.push([377, 233]);

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

myObservableArray.reverse();
myObservableArray.reverse();

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

myObservableArray.shift();
myObservableArray.shift();

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

myArray.sort();

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

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

Improve this document

Demo Source