ko.utils.arrayFirst using Knockoutjs and Javascript

So, you’re using KnockoutJS and Javascript and you need to loop an array; are you tired of writing for loops with an if statement followed by break to exit the loop? I know I am, so let’s look at a better way to do it.

This will be a great addition to my list of KnockoutJS tutorials that you should check out. Enough chat, let’s get right to it.

• Create Observable Array
• Using ko.utils.arrayFirst example code
• What is Ko utility functions?
• What is Ko observableArray function?
• How do I sort knockout observable array?
• How do you update items in observableArray knockout?
• What is $data in Ko?
• How do you clear a knockout observable array?
• What is an observable array?

Create Observable Array

To start, let’s look at the old way that makes me cringe!

var myCustomers = ko.observableArray([
{
"companyName": "End Your If"
},
{
"companyName": "Your company"
}
]);
var foundIt = false;
for (var i = 0; i < myCustomers().length; i++) {
var customer = myCustomers()[i];
if (customer.companyName === "End Your If") {
foundIt = true;
break;
}
}

There are a couple of things I wish to point out here. I’ve made this an observableArray to highlight a couple of Knockout gotchas.

As you may have noticed it’s important that whenever I access the myCustomers variable I am using () after to access the properties.

Using ko.utils.arrayFirst example code

Alright, now let’s look at an example using ko.utils.arrayFirst to accomplish the same thing.

var myCustomers = ko.observableArray([
{
"companyName": "End Your If"
},
{
"companyName": "Your company"
}
]);
var foundIt = ko.utils.arrayFirst(myCustomers(), function(customer) {
return customer.companyName === "End Your If";
});

That’s it, we’ve replaced that clunky for loop with a single line of code that does some handy things for us:

1. Loops the array
2. Provides a readable variable name
3. Return statement that will exit as soon as it finds a match or returns false if not found at all

One final note, notice that when passing the array to the ko.utils.arrayFirst function that I’ve added () because this is an observable array.

Another option is to Using a forEach loop with JavaScript instead of relying on the ko.utils functions.

What is Ko utility functions?

Knockout includes the utility service ko.util-parse.Json. This will allow you to perform a JSON.parse when this is available, or return it to evaluation for older webservers.

Basically, we could use JSON strings for constructing objects.

What is Ko observableArray function?

The Observable array allows you to detect changes in the observable array.

This is useful when displaying or editing several values that are required to appear and disappear when a new item has been added.

How do I sort knockout observable array?

KnockoutJS Observable Sort() is a way to sort an array. Standard a list of items can be organized in ascending order.

The reverse() method is used to sort an array in descending order. For more information see Sort array of objects by any property value using Javascript.

How do you update items in observableArray knockout?

You must define object-oriented structures for each component in the data and add them to an observable array.

After that, you can do the same thing. Product Quantity(20) is updated automatically.

What is $data in Ko?

$Data is an internal variable used for the object that currently has a bounding object. It is an element in the ViewModel examples.

How do you clear a knockout observable array?

KnockoutJS observe remove (value) methods remove items matching a value and return as an array. Synchronistics.

The array names.Removed(‘Valuation’). Parameter. Accepts one parameter for the value of which it is removed.

What is an observable array?

Observables of arrays are arrays arranged as streams, whose tick yields a whole new array each. Use an array if you simply want the lists in one spot.

It’s possible to change the array, but it does not alter that the array has only been used once.