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.

Answer 1

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

Here is a working fiddle

Answer 2

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 -->