verschachtelte Objekte in JSON undefinierten Fehler beim Zugriff auf

Question

i Fehler erhalten auf console-- screenshot app.js: 26 Uncaught Typeerror: kann Eigenschaft ‚Standort‘ undefinierter

Ich versuche, die Eigenschaft data.places lesen zuzugreifen .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

Es geschieht, weil Sie eine Eigenschaft aus einer Liste zu erhalten versuchen, nicht von einem Objekt. Wenn das Konsolenergebnis angezeigt wird, geben Sie eine Liste und nicht den Objektbereich zurück. Sie konnten das tun:

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]

Sorry, wie Sie gesagt haben Sie ein verschachteltes Objekt benötigen, damit ich den Code bearbeitet.

Answer 2

Das Problem liegt hier

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

Sie zunächst einmal müssen die geometry Objektvariable erstellen, dann eine location Eigenschaft hinzufügen, und dann schließlich Ihre Observablen, dass hinzuzufügen.

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

Im Grunde war das Problem, dass ich versuchte, ein Objekt zu acces, die nicht erstellt wurde - Geometrie

this.geometry.location.lat

Also, ich nur

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

verwenden können