访问对象内部多维数组内的对象元素

Question

I'm using knockout.js and my viewModel is an object with a multidimensional array inside it and I'm have trouble accessing a specific element. My code is:

var viewModel = {
    states: [
        new state("Virginia", [["Va Beach",[{lat:36.852926,lng:-75.977985}]], ["Chincoteague Island",[{lat:37.933179,lng:-75.378809}]]]),
        new state("Maryland", [["Atlantic City",[{lat:39.364283,lng:-74.422927}]], ["Ocean city",[{lat:38.336503,lng:-75.084906}]]]),
        new state("North Carolina", [["Oakacroke",[{lat:35.114615,lng:-75.98101}]], ["Nags Head",[{lat:35.957392,lng:-75.624062}]],["Emerald Isle",[{lat:34.677940,lng:-76.950776}]]])
        ]
};

var state = function(name, city) {
    this.name = name;
    this.city = ko.observableArray(city);
}

I'm trying to get the lat and lng of each individual city. I've played around with with JSON.stringify and filter but havent been able to isolate the lan and lng specifically.

http://codepen.io/ntibbs/pen/vNMKzg?editors=101

Answer 1

In the context of the foreach:city binding, you would need to do something like this:

<span data-bind="text: $data[1][0].lat"></span>
<span data-bind="text: $data[1][0].lng"></span>

Basically, you states array has a property called city (bad name, it really ought to be cities ) which is, itself, an array. So you need to index that array (which is what foreach is doing) and each item in that array is itself an array where the first item is the name of the city and the second is an array with a single object with the lat and lng properties you need.

So something like viewModel.states[0].city[0][1][0].lat would should give you 36.852926

Of course, looking at how convoluted it is to access the properties you need, it is probably worth while to think about transforming it into something easier to work with.

Answer 2

Yep, each state object has a name, and contains an array of places.

Each place contains an array with a single element - a latitude, longitude pair. eg

("Virginia",   
   [  
      [
          "Va Beach",
              [
                  {lat:36.852926,lng:-75.977985}
              ]  
      ]  
   ]
)

So
locationOfPlace = aState[aPlaceName][1]

And to refer to each property:
latitudeOfPlace = aState[aPlaceName][1].lat
longitudeOfPlace = aState[aPlaceName][1].lng

Answer 3

You've made an odd decision to wrap the lat/lon object in an array, as if a city might have multiple coordinates attached to it.

I think it would help clear up your design if, in addition to having a state object, you had a city object, rather than an object literal. Something like:

var city = function(name, lat, lon) {
    this.name = name;
    this.location = {
        lat: lat,
        lon: lon
    };
};

Then you'd declare a state more like:

new state("Virginia", [
  new city("Va Beach", 36.852926, -75.977985),
  new city("Chincoteague Island", 37.933179, -75.378809)
]);

and you might access city properties like so:

state.city()[0].location.lat