 <p>You can use array indexers in your bindings, so you can access the first index with <code>$data[0]</code>:</p> <pre><code> &lt;ul data-bind="foreach: city"&gt; &lt;li&gt; &lt;span data-bind="text: $data[0]"&gt; &lt;/span&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Working <a href="http://codepen.io/anon/pen/wKZppR" rel="nofollow">CodePen</a></p> <p>A more view model oriented approach would be to create a proper "city" object which has a <code>name</code> property:</p> <pre><code>var City = function(data) { this.name = data[0]; this.coords = data[1]; } </code></pre> <p>And use this <code>City</code> when creating a <code>state</code>:</p> <pre><code>var state = function(name, city) { this.name = name; this.city = ko.observableArray(city.map(function(c){ return new City(c)})); } </code></pre> <p>And your binding could look like this:</p> <pre><code>&lt;ul data-bind="foreach: city"&gt; &lt;li&gt; &lt;span data-bind="text: name"&gt; &lt;/span&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Sample <a href="http://codepen.io/anon/pen/WQWdMW" rel="nofollow">CodePen</a></p>