JS提取动态未知结构JSON顶层键及解析报错问题咨询

• 你同时混用了浏览器原生<script>标签引入和CommonJS规范的require()语法，二者本身不兼容，浏览器环境默认不支持直接用require()加载本地JSON文件
• 直接通过<script src="./Data0012.json">引入JSON文件时，浏览器会把JSON内容当作普通JavaScript脚本解析，JSON的"键": 值格式不符合JS语法规则，就会触发你看到的Uncaught SyntaxError: Unexpected token ':'报错
• 原代码的遍历逻辑存在问题：console.log(key)写在for...in循环外部，最终只会打印最后一次遍历到的单个键，无法拿到全部顶层键的集合

核心提取逻辑用原生Object.keys()即可实现，不需要预知JSON结构、不需要修改原文件，对所有顶层键动态变化的同类JSON文件都可复用，以下分两种常用运行环境给出可直接运行的代码：

浏览器环境（原生JS无框架） #

不要用<script>标签直接引入JSON文件，通过fetchAPI加载文件后自动解析即可：

// 加载并解析目标JSON文件
fetch('./Data0012.json')
  .then(res => {
    if (!res.ok) throw new Error('JSON文件加载失败，请检查文件路径');
    return res.json(); // 自动将JSON内容解析为JS对象，无需手动调用JSON.parse
  })
  .then(data => {
    // 一步提取所有顶层动态键，返回值是包含所有键名的数组
    const topLevelKeys = Object.keys(data);
    console.log('提取到的所有顶层键：', topLevelKeys);

    // 后续可直接遍历键数组取对应数据
    topLevelKeys.forEach(key => {
      const itemData = data[key];
      // 在此处编写后续业务逻辑，比如读取Player字段、Hands字段等
      console.log(`键${key}对应的数据：`, itemData);
    });
  })
  .catch(err => console.error('运行出错：', err));

注意：运行该代码时请通过本地HTTP服务打开HTML文件（比如用VS Code的Live Server插件），不要直接双击打开本地HTML文件，否则会触发浏览器跨域安全限制，导致无法加载本地JSON文件。

Node.js环境 #

如果是在Node.js环境下跑脚本，不需要使用<script>标签，根据你的模块规范选对应写法即可：

CommonJS 规范（默认Node.js环境） #

require()引入JSON文件时会自动完成解析，不需要手动调用JSON.parse()：

// 直接导入JSON文件，自动解析为JS对象
const data = require('./Data0012.json');
// 提取所有顶层动态键
const topLevelKeys = Object.keys(data);
console.log('提取到的所有顶层键：', topLevelKeys);

// 后续使用示例
topLevelKeys.forEach(key => {
  console.log('当前数据项：', key, data[key]);
});

ES Module 规范（package.json中配置了"type": "module"） #

import { readFile } from 'fs/promises';
// 读取并解析JSON文件
const data = JSON.parse(
  await readFile(new URL('./Data0012.json', import.meta.url))
);
// 提取所有顶层动态键
const topLevelKeys = Object.keys(data);
console.log('提取到的所有顶层键：', topLevelKeys);

• 核心提取逻辑Object.keys(解析后的JSON对象)不依赖任何固定键名，不管顶层键是动态数值、字符串还是其他格式，不管JSON内部嵌套结构如何，都能稳定拿到第一层的所有键名，完全满足复用要求
• 不建议用手写for...in循环外部取值的写法，要么在循环内部处理单个键的逻辑，要么直接用Object.keys()一次性拿到所有键的数组，后续操作更便捷，也能避免作用域导致的取值错误

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