How do I access an object by index in a knockout observablearray?

Question

I have an observable array:

var myObservableArray = ko.observableArray([
    { name: "Car", price: "9999" },
    { name: "Shoes", price: "20" },
    { name: "Paper", price: "1" }
]);

I'm trying to access the price of the first item in the array.

<div data-bind="text: myObservableArray()[0]"></div>

Displays:

[object Object]

I've tried:

<div data-bind="text: myObservableArray()[0].price"></div>

But that just returns a null.

What's the correct syntax for doing this?

Edit: Fixed a copy and paste error pointed out below.

That's how you do it. If it's not working, you have some other issue with your code. — Chris Pratt
– Chris Pratt, Commented Apr 18, 2013 at 18:31

Kyeotic · Accepted Answer · 2013-04-18 19:16:51Z

7

Other than using the wrong property name, developerexampledata instead of myObservableArray, your code is just fine.

Here is a working fiddle

answered Apr 18, 2013 at 19:16

Kyeotic

19.9k12 gold badges73 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric Over a year ago

Yeah that was a copy and paste error when I made the question, my bad. I appreciate the fiddle though; at least I know I've got the syntax right and my problem lay elsewhere. I'll accept your answer and dig in a bit more to figure out where else I might be going wrong.

Mattl · Accepted Answer · 2016-02-05 11:24:28Z

1

This could simply be down to you trying to access the first item of an array before the array has been populated.

Wrap your data-bind control with a simple if statement to check first:

<!-- ko if: (myObservableArray().length > 0) -->
    <div data-bind="text: myObservableArray()[0].price"></div>
<!-- /ko -->

answered Feb 5, 2016 at 11:24

Mattl

1,6383 gold badges25 silver badges51 bronze badges

Comments

d219 · Accepted Answer · 2020-06-04 20:35:20Z

0

wrong way.....

self.getvaluefrom = function (a ,b)

try catch return a valid value then add data-bind="text:getvaluefrom(a,b) if the item is not in the array you'll get a ko error....

ko html displays only a static valid entry of an array....

edited Jun 4, 2020 at 20:35

d219

2,8757 gold badges34 silver badges39 bronze badges

answered Jun 4, 2020 at 17:20

Julien Brunelle

212 bronze badges

3 Comments

Julien Brunelle Over a year ago

Also if you want to populate the array .... use var myarrayonload = function() alert("i loaded") its a private function .... then load what ever you want into the array....

Julien Brunelle Over a year ago

var onload = ko.computed(function()

Julien Brunelle Over a year ago

no loops needed..... click: function === self.onclick = function(data,event) now use the var a = self.arrayentery.indexOf(data);

Collectives™ on Stack Overflow

How do I access an object by index in a knockout observablearray?

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related