I am currently working on extracting the 0 index of a nested array in a multidimensional array. My approach involves using a foreach binding to display states and cities within a <ul>. Here is the code I have so far:
http://codepen.io/ntibbs/pen/vNMKzg?editors=101
<ul id='list' data-bind="foreach: states">
<li>
<div>Surf locations in
<span data-bind="text: name"> </span>:
</div>
<ul data-bind="foreach: city">
<li>
<span data-bind="text: $data[0] .city"> </span> // Adjusted to only show city names
</li>
</ul>
</li>
</ul>
var state = function(name, city) {
this.name = name;
this.city = ko.observableArray(city);
}
var viewModel = {
states: [
new state("Virginia", [["Va Beach",[36.852926, -75.977985]], ["Chincoteague Island",[37.933179, -75.378809]]]),
new state("Maryland", [["Atlantic City",[39.364283, -74.422927]], ["Ocean city",[38.336503, -75.084906]]]),
new state("North Carolina", [["Oakacroke",[35.114615, -75.98101]], ["Nags Head",[35.957392, -75.624062]],["Emerald Isle",[34.677940, -76.950776]]])
]
};
ko.applyBindings(viewModel);
The current implementation displays the longitude, latitude, and city names, however, my objective is to only list the city names.