Доступ вложенных объектов в JSON undefinded ошибки

Question

я получаю ошибку на console-- screenshot app.js: 26 Uncaught TypeError: Не удается прочитать свойство «местоположение» неопределенной

я пытаюсь получить доступ к собственности data.places .geomtry.location.lat

var initialPlaces = { 
     "places": 
     [{ 
      "geometry" : { 
       "location" :{ 
        "lat" : "40.715813", 
        "lng" : "-74.009433" 
       } 
      }, 
      "name" : "Acappella" 
     },{ 
      "geometry" : { 
       "location" :{ 
        "lat" : "40.715813", 
        "lng" : "-74.009433" 
       } 
      }, 
      "name" : "Acappella" 
     } 
     ] 
    } 

var Place = function(data){ 
    console.log(data); 
    this.geometry.location.lat = ko.observable(data.geometry.location.lat); 
    this.geometry.location.lng = ko.observable(data.geometry.location.lng); 
    this.name = ko.observable(data.name); 
}; 

Answer 1

Это происходит потому, что вы пытаетесь получить свойство из списка, а не из объекта. Если вы видите, что результат консоли возвращает список, а не объект. Вы могли бы сделать это:

var initialPlaces = { 
 
    "places": [{ 
 
    "geometry": { 
 
     "location": { 
 
     "lat": "40.715813", 
 
     "lng": "-74.009433" 
 
     } 
 
    }, 
 
    "name": "Acappella" 
 
    }, { 
 
    "geometry": { 
 
     "location": { 
 
     "lat": "40.715813", 
 
     "lng": "-74.009433" 
 
     } 
 
    }, 
 
    "name": "Acappella" 
 
    }] 
 
} 
 

 
var ViewModel = function() { 
 

 
    var self = this; 
 

 
    self.place = ko.mapping.fromJS(initialPlaces); 
 
    
 
}; 
 

 
var viewModel = new ViewModel(); 
 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> 
 
<ul data-bind="foreach: place.places"> 
 
    <li> 
 
    <p data-bind="text:$data.name"></p> 
 
    <p data-bind="text:$data.geometry.location.lat"></p> 
 
    <p data-bind="text:$data.geometry.location.lng"></p> 
 
    </li> 
 
</ul>

[EDIT]

К сожалению, как вы сказали, что вам нужно вложенный объект, так что я редактировал код.

Answer 2

Проблема заключается здесь

var Place = function(data) { 
    console.log(data); 
    this.geometry.location.lat // << 
    ... 

Вы в первую очередь необходимости создать переменную geometry объекта, а затем добавить location свойства, а затем, наконец, добавить свой наблюдаемые к этому.

var Place = function(data) { 

    var self = this; 

    self.geometry = { 
     location: { 
     lat: ko.observable(data.geometry.location.lat), 
     lng: ko.observable(data.geometry.location.lng), 
     } 
    }; 
}; 

Answer 3

В основном, проблема заключалась в том, что я пытался Acces объект, который не был создан - геометрия

this.geometry.location.lat

Таким образом, я могу использовать только

this.lat = ko.observable(data.geometry.location.lat)