如何在Mapbox中访问GeoJSON的嵌套对象？

我通过Mapbox瓦片服务加载大型GeoJSON，点击图层能获取到statistics数据，但直接用点语法访问嵌套属性失败。当前点击事件代码：

map.on('click', 'area-polygon', (e) => {
        console.log(e.features[0].properties.statistics);
  });

控制台输出结构如下（JSON字符串格式）：

{"runs":
    {"byActivity":
        {"downhill":
            {"byDifficulty":
                {"easy":
                    {"count":17,
                    "lengthInKm":14.4112,
                    "minElevation":1553.6,
                    "maxElevation":1999.59,
                    "combinedElevationChange":1996.04},
                "advanced":
                    {"count":4,
                    "lengthInKm":2.33805,
                    "minElevation":1645.08,
                    "maxElevation":1936.27,
                    "combinedElevationChange":628.717},
                "intermediate":
                    {"count":11,
                    "lengthInKm":8.24159,
                    "minElevation":1553.6,
                    "maxElevation":2000.42,
                    "combinedElevationChange":1542.16},
                "other":
                    {"count":5,
                    "lengthInKm":2.42858,
                    "minElevation":1595.16,
                    "maxElevation":2005.37,
                    "combinedElevationChange":208.312}
                }
            }
        },
        "minElevation":1553.6,
        "maxElevation":2005.37  
    },
    "lifts":
        {"byType":
            {"chair_lift":
                {"count":3,
                "lengthInKm":3.82236,
                "minElevation":1553.6,
                "maxElevation":1998.59,
                "combinedElevationChange":863.786
                },
            "magic_carpet":
                {"count":1,
                "lengthInKm":0.962681,
                "minElevation":1580.79,
                "maxElevation":1742.16,
                "combinedElevationChange":161.378},
            "gondola":
                {"count":1,
                "lengthInKm":2.07562,
                "minElevation":1580.44,
                "maxElevation":1998.42,
                "combinedElevationChange":417.985}
            },
            "minElevation":1553.6,
            "maxElevation":1998.59
        },
    "maxElevation":1998.59,
    "minElevation":1553.6
}

尝试用e.features[0].properties.statistics.runs.byActivity.downhill.byDifficulty.easy.count访问easy的count属性无效。

问题根源 #

e.features[0].properties.statistics是未解析的JSON字符串，而非可直接操作的JavaScript对象，因此无法通过点语法访问嵌套属性。

解决方案 #

先通过JSON.parse()将JSON字符串解析为JavaScript对象，再进行属性访问：

map.on('click', 'area-polygon', (e) => {
  // 解析JSON字符串为JS对象
  const stats = JSON.parse(e.features[0].properties.statistics);
  // 访问目标属性，推荐使用可选链避免属性缺失报错
  const easyCount = stats?.runs?.byActivity?.downhill?.byDifficulty?.easy?.count;
  console.log(easyCount); // 输出17
});

补充说明 #

• JSON.parse()是核心步骤，它将字符串格式的JSON转换为可操作的JS对象
• 可选链操作符?.可以避免因某一层级属性不存在导致的代码崩溃（比如部分区域无downhill数据时）
• 若确认所有数据结构完全一致，也可省略可选链，直接写stats.runs.byActivity.downhill.byDifficulty.easy.count

内容的提问来源于stack exchange，提问作者spreaderman