JavaScript如何动态获取嵌套JSON结构的内层所有键名

你的代码有两个直接导致问题的点：

1. loadJSON的XMLHttpRequest是异步执行的，你写在回调外面的取键、存localStorage逻辑，会在请求还没返回的时候就运行，这时候根本没拿到JSON数据，结果肯定不对。
2. 你之前取Object.keys是直接对着解析后的根对象取，拿到的自然是"-162.65"这类外层键，没进到内层对象里。

既然你确认所有内层玩家数据的字段结构完全一致，既不用改源JSON，也不用硬编码字段名，只要在请求成功的回调里，随便取一个外层键对应的内层对象，调用Object.keys就能拿到所有类似表头的字段名。

修改后代码 #

<body>
  <div><select id="selector"></select></div>
  <div class="chart"></div>
  <div class="equation"></div>
  <div class="equation"></div>
  <script>
    function loadJSON(filePath, callback) {
      var xobj = new XMLHttpRequest();
      xobj.overrideMimeType("application/json");
      xobj.open('GET', filePath, true);
      xobj.onreadystatechange = function() {
        if (xobj.readyState === 4 && xobj.status === 200) {
          callback(xobj.responseText);
        }
      };
      xobj.send(null);
    }

    loadJSON("Data0012.json", function(text){
      const data = JSON.parse(text);
      // 自动取第一个外层键，不需要提前知道键值
      const firstKey = Object.keys(data)[0];
      // 取对应内层对象的所有键，就是统一的字段列表
      const tableHeaders = Object.keys(data[firstKey]);

      console.log('内层字段列表：', tableHeaders);
      // 存localStorage必须在回调里做，保证拿到的是有效数据
      // 注意localStorage只能存字符串，存数组要先序列化
      localStorage.setItem('tableHeaders', JSON.stringify(tableHeaders));

      // 所有依赖JSON数据的逻辑都要写在回调里，比如给下拉框塞选项
      const selector = document.getElementById('selector');
      tableHeaders.forEach(header => {
        const option = document.createElement('option');
        option.value = header;
        option.text = header;
        selector.add(option);
      });
    });

    // 其他脚本要取存好的字段，记得等首次加载完成后再调用，取出来要反序列化
    // const headers = JSON.parse(localStorage.getItem('tableHeaders') || '[]');
  </script>
</body>

补充说明 #

• 原来写的<script type="application/json" src="Data0012.json"></script>这行没有实际作用，浏览器不会自动解析该标签引入的JSON为可用JS变量，可直接删除。
• 如果本地直接双击打开HTML文件走file协议访问，部分浏览器会拦截XMLHttpRequest请求抛出跨域错误，搭配本地静态服务（比如VSCode的Live Server插件、本地Nginx）走HTTP协议访问即可正常加载JSON。
• 由于所有内层对象结构完全一致，仅需取第一个内层对象的键就能得到全量字段名，无需遍历所有外层条目损耗性能。

提示：如果后续业务需要校验字段一致性，也可以遍历所有内层对象对比键集合，应对极少数可能出现的字段缺失场景，按你给出的JSON结构说明不需要做这步处理。

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