Observable Array module

import { ObservableArray, ChangedData, ChangeType } from "tns-core-modules/data/observable-array";

Create ObservableArray from array.

const sa = [1, 2, 3];
const array = new ObservableArray(sa);

Create ObservableArray from arguments.

const array = new ObservableArray(1, 2, 3);

Create ObservableArray with specific length.

const array = new ObservableArray(100);

Set ObservableArray length to new value.

const array = new ObservableArray(100);
array.length = 50;

Get item at specified index using getItem(index) method.

const array = new ObservableArray([1, 2, 3]);
const firstItem = array.getItem(0);
const secondItem = array.getItem(1);
const thirdItem = array.getItem(2);

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

const array = new ObservableArray([1, 2, 3]);
array.setItem(1, 5);

Set item at specified index using setItem(index, item) method and observe change event data.

let index: number;
let action: string;
let addedCount: number;
let removed: Array<number>;

const array = new ObservableArray([1, 2, 3]);
array.on("change", (args) => {
    index = args.index; // Index of the changed item.
    action = args.action; // Action. In this case Update.
    addedCount = args.addedCount; // Number of added items. In this case 1.
    removed = args.removed; // Array of removed items. In this case with single item (2).
});
array.setItem(1, 5);

Use concat() method to combine ObservableArray with array.

const array = new ObservableArray([1, 2, 3]);
const result = array.concat([4, 5, 6]);

Use join() method to convert ObservableArray to comma separated string.

const array = new ObservableArray([1, 2, 3]);
const result = array.join();

Use join(separator) method to convert ObservableArray to string separated with specified separator.

const array = new ObservableArray([1, 2, 3]);
const result = array.join(".");

Use pop() method to remove the last element.

const array = new ObservableArray([1, 2, 3]);
const result = array.pop();

Handle "change" event to know more info about the change after calling pop() method.

const array = new ObservableArray([1, 2, 3]);

array.on(ObservableArray.changeEvent, (args: ChangedData<number>) => {
    // Argument (args) is ChangedData<T>.
    // args.eventName is "change".
    // args.action is "delete".
    // args.index is equal to the array length - 1.
    // args.removed.length is 1.
    // args.addedCount is 0.

});

array.pop();

Use push() method to add single element to the array.

const array = new ObservableArray([1, 2, 3]);
const result = array.push(4);

Handle "change" event to know more info about the change after calling push() method with single element.

const array = new ObservableArray([1, 2, 3]);
array.on(ObservableArray.changeEvent, (args: ChangedData<number>) => {
    // Argument (args) is ChangedData<T>.
    // args.eventName is "change".
    // args.action is "add".
    // args.index is equal to the array length.
    // args.removed.length is 0.
    // args.addedCount is 1.

});

array.push(4);

Use push() method to add multiple elements to the array.

const array = new ObservableArray([1, 2, 3]);
const result = array.push(4, 5, 6);

Handle "change" event to know more info about the change after calling push() method with multiple elements.

const array = new ObservableArray([1, 2, 3]);
array.on(ObservableArray.changeEvent, (args: ChangedData<number>) => {
    // Argument (args) is ChangedData<T>.
    // args.eventName is "change".
    // args.action is "add".
    // args.index is equal to the array length.
    // args.removed.length is 0.
    // args.addedCount is equal to the number of added items.

});

array.push(4, 5, 6);

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

const array = new ObservableArray([1, 2, 3]);
const result = array.push([4, 5, 6]);

Handle "change" event to know more info about the change after calling push() method with multiple elements from source array.

const array = new ObservableArray([1, 2, 3]);
array.on(ObservableArray.changeEvent, (args: ChangedData<number>) => {
    // Argument (args) is ChangedData<T>.
    // args.eventName is "change".
    // args.action is "add".
    // args.index is equal to the array length.
    // args.removed.length is 0.
    // args.addedCount is equal to the number of added items.

});

array.push([4, 5, 6]);

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

const array = new ObservableArray([1, 2, 3]);
const result = array.reverse();

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

const array = new ObservableArray([1, 2, 3]);
const result = array.shift();

Handle "change" event to know more info about the change after calling shift() method.

const array = new ObservableArray([1, 2, 3]);

array.on(ObservableArray.changeEvent, (args: ChangedData<number>) => {
    // Argument (args) is ChangedData<T>.
    // args.eventName is "change".
    // args.action is "delete".
    // args.index is 0.
    // args.removed.length is 1.
    // args.addedCount is 0.

});

array.shift();

Use slice() method to return array with all ObservableArray elements.

const array = new ObservableArray([1, 2, 3]);
const result = array.slice();

Use slice(star, end) method to return section of the array.

const array = new ObservableArray([1, 2, 3, 4, 5]);
const result = array.slice(2, 4);

Use sort() method to sort the array.

const array = new ObservableArray([3, 2, 1]);
const result = array.sort();

Use sort(compareFunction) method to sort the array with your own comparing logic.

const array = new ObservableArray([10, 100, 1]);
const result = array.sort((a: number, b: number) => { return a - b; });

Use splice(start, deleteCount) method to delete elements in the array.

const array = new ObservableArray(["one", "two", "three"]);
const result = array.splice(1, 2);

Handle "change" event to know more info about the change after calling splice(start, deleteCount) method.

const array = new ObservableArray([1, 2, 3]);

array.on(ObservableArray.changeEvent, (args: ChangedData<number>) => {
    // Argument (args) is ChangedData<T>.
    // args.eventName is "change".
    // args.action is "splice".
    // args.index is the start index.
    // args.removed.length is equal to the number of deleted items.
    // args.addedCount is 0.

});

array.splice(1, 2);

Use splice(start, deleteCount, ...arguments) method to remove and insert elements in the array.

const array = new ObservableArray(["one", "two", "three"]);
const result = array.splice(1, 2, "six", "seven");

Handle "change" event to know more info about the change after calling splice(start, deleteCount, ...arguments) method.

const array = new ObservableArray(["one", "two", "three"]);

array.on(ObservableArray.changeEvent, (args: ChangedData<number>) => {
    // Argument (args) is ChangedData<T>.
    // args.eventName is "change".
    // args.action is "splice".
    // args.index is the start index.
    // args.removed.length is equal to the number of deleted items.
    // args.addedCount is equal to the delta between number of inserted items and number of deleted items but not less than 0.

});

array.splice(1, 2, "six", "seven", "eight");

Use unshift(item1, item2... itemN) method to insert elements from the start of the array.

const array = new ObservableArray([1, 2, 3]);
const result = array.unshift(4, 5);

Handle "change" event to know more info about the change after calling unshift(item1, item2... itemN) method.

const array = new ObservableArray([1, 2, 3]);
array.on(ObservableArray.changeEvent, (args: ChangedData<number>) => {
    //// Argument (args) is ChangedData<T>.
    //// args.eventName is "change".
    //// args.action is "add".
    //// args.index is 0.
    //// args.removed.length is 0.
    //// args.addedCount is equal to the number of inserted items.

});

array.unshift(4, 5);

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

const array = new ObservableArray(["one", "two", "three"]);
const result = array.indexOf("two");

Use indexOf(item, fromIndex) method to get the index of the desired item in the array starting from specified index.

const array = new ObservableArray(["one", "two", "three"]);
const result = array.indexOf("two", 2);

Use lastIndexOf(item) method to get the last index of the desired item in the array.

const result = array.lastIndexOf("two");

Use lastIndexOf(item, fromIndex) method to get the last index of the desired item in the array starting from specified index.

const array = new ObservableArray(["one", "two", "two", "one", "three"]);
const result = array.lastIndexOf("two", 1);

Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.