无涯教程网

Javascript 访问嵌套对象中的特定值

发布于03月10日

我有一个嵌套的对象，看起来像下面

{
    "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变量，以传递给传单组件

 <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
                    ]} />
                )

但无法访问这些值.

有谁能建议最好的方法吗？

推荐答案

假设包含嵌套对象的数据 struct 被指定给"数据"变量:

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]
  />)
})

Javascript相关问答推荐

如果使用React Select ，如何将CSS类添加到元素中？

TypScript：根据共享属性对项目进行分组并为其分配groupID

将未等待的未处理的错误promise 转变为警告@ changeTicksAndRejections(由当时的抛出错误创建)

v-textfield的规则找不到数据中声明的元素

在HTML中使用脚本变量作为背景图像源

为什么使用MAX_SAFE_INTEGER生成随机整数时数字分布不准确？

if/else JavaScript中的条件行为

浮动Div的淡出模糊效果

Spring boot JSON解析错误：意外字符错误

如何粗体匹配的字母时输入搜索框使用javascript？

jQuery s data()[storage object]在vanilla JavaScript中？'

如何迭代叔父元素的子HTML元素

有条件重定向到移动子域

使用类型：assets资源 /资源&时，webpack的配置对象&无效

每次重新呈现时调用useState initialValue函数

将基元传递给THEN处理程序

如何在一个对象Java脚本中获取不同键的重复值？

如何根据查询结果重新排列日期

JavaScript&；Reaction-如何避免在不使用字典/对象的情况下出现地狱？

MUI迷你图：如何将$符号添加到MUI迷你图中的工具提示数据

实用课程推荐

相关教程推荐