Working with Knockout.js Part 4: Observable Arrays

Read Part 3: Working with Observables

Read Part 2: Understanding MVVM

Read Part 1: Getting Started

So far we have learnt fundamental of KO. In Part 3 we worked with single observable object. In this post we will take a look on working with Arrays of Observable. Focus of this post is to understand how Observable Array works

A simple observable array can be created as following,

Image may be NSFW.
Clik here to view.

Basic properties of observableArray is as follows,

• It notifies view when item is added
• It notifies view when item is removed

It is worth discussing here is that, ObservableArray is not responsible to determine whether state of the objects added in the array are observable or not? It only notifies when an object is added or removed from the array.

Image may be NSFW.
Clik here to view.

Let us assume that we have an observable object named studentViewModelObject as following,

var studentViewModelObject = {

studentName: "DJ",
 studentGrade: "B",
 studentMarks: 90

};

Next let us create a KO observable array and push (insert) this object in the array. We can create a observablearray and insert an object in that calling the push function. In the following code snippet we are finding the

• Length of the array by calling arrayname().length
• An object’s item can be printed as arrayname()[index].objectproperties

var studentArray = ko.observableArray();
 studentArray.push(studentViewModelObject);
 var studentarraylegnth = studentArray().length;
 var nameoffirststudent = studentArray()[0].studentName;

You notice that syntax of push in KO ObvservableArray is different than native JavaScript array push function.

Image may be NSFW.
Clik here to view.

There are many specific Knockout observableArray functions. We will discuss them one by one below, however technically you can apply all native JavaScript functions to KO observable array.

KO Observable functions are as follows,

IndexOf()

Returns index of item from the array. If item is not found then -1 is retuned. As an output we will get 0. Since studentViewModelObject is first element of the KO studentArray and KO ObservableArray is zero indexed.

var indexofstudentdj = studentArray.indexOf(studentViewModelObject);
 alert(indexofstudentdj);

slice()

This function will return items from the KO Observable array Slice takes two parameters. First parameter is starting index and second parameter is end index.

var lasttwoelementarray = studentArray.slice(1, 2);
 alert(lasttwoelementarray[0].studentName);

push()

This function is to insert an item at the last of the array. Push also notifies to view and subscribers on execution. This is same as native JavaScript push function with added notification capability. You can insert an item as following

studentArray.push(studentViewModelObject);

pop()

This function is to remove an item at the last of the array. Pop also notifies to view and subscribers on execution. This is same as native JavaScript pop function with added notification capability. You can pop an item as following

var item = studentArray.pop();

unshift()

This function will insert an item at the beginning of the array. This will add item at the 0^th position of the array. This function will create notification also. Following code will insert studentViewModelObject3 at the beginning of the array. In alert you will get Ravish.

var studentViewModelObject3 = {

studentName: "Ravish",
 studentGrade: "A",
 studentMarks: 89

};
 studentArray.unshift(studentViewModelObject3);
 alert(studentArray()[0].studentName);

shift()

This function will delete an item at the beginning of the array. This will remove item at the 0^th position of the array. This function will create notification also.

studentArray.shift();

reverse()

This function will reverse the array.

studentArray.reverse();

sort()

This function will sort array in alphabetical order or in ascending order.

studentArray.sort();

remove()

There are four ways you can remove item or items from KO Observable array. remove is specific to KO ObservableArray .

Image may be NSFW.
Clik here to view.

KO ObservableArray is very important and useful while creating web application using KnockOut.js. I hope you find this post useful. In further posts of this series we will learn other aspects of Knockout.js. Thanks for reading.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.