访问嵌套对象中的特定值

Question

我有一个嵌套对象，如下所示

{
    "Place One": {
        primary: "#000000",
        secondary: "#97233f",
        coordinates: {
            lat: 49.5013,
            lon: 87.0622
        }
    },
    "Place Two": {
        primary: "#000000",
        secondary: "#a71930",
        coordinates: {
            lat: 40.6013,
            lon: 81.0622
        }
    },
    "Place Three": {
        primary: "#9e7c0c",
        secondary: "#241773",
        coordinates: {
            lat: 40.5033,
            lon: 84.0622
        }
    }
}

我正在尝试访问每个 lat/lon 变量以传递给 Leaflet React 组件

 <Marker
          key={park.properties.PARK_ID}
          position={[
            ***the lat***,
            ***the lon***
          ]}
        
        />

我试过以下方法：

Object.fromEntries(
                Object.entries(teams).map(([key, { coordinates }]) => <Marker
                    position={[
                        coordinates.lat,
                        coordinates.lon
                    ]} />
                )

但无法访问这些值。

谁能告诉我最好的方法吗？

Answer 1

我相信你应该像这样开始解构嵌套对象

const obj1 = your_nested_object
const lat = obj1.Place_One.coordinates.lat
const lon = obj1.Place_One.coordinates.lon

Answer 2

假设包含嵌套对象的数据结构被分配给“数据”变量：

const data = {
  "Place One": {}, // etc.
}

然后在您的 React 组件模板中，您可以循环遍历“嵌套对象”：

Object.keys(data).map((key) => {
  const nestedObject = data[key]
  return (<Marker
    key={key}
    position={nestedObject.coordinates} // or [nestedObject.coordinates.lat, nestedObject.coordinates.lon]
  />)
})

访问嵌套对象中的特定值

Accessing specific values in a nested object

javascript

object

leaflet

reactjs