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;
import { ObservableArray, ChangedData } from "tns-core-modules/data/observable-array";
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);
// 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);
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]);
Reverse, Shift, and Sort operations
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();
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);
const index = myObservableArray.indexOf(13);
console.log(index);