如何遍历JSON对象？jQuery each仅单次迭代的问题排查

问题描述 #

尝试使用jQuery的each方法遍历JSON对象，但仅返回一次迭代，相关代码如下：

JavaScript代码 #

var data = "{
  \"SIEcat4\": {
    \"3001\": {
      \"test\": \"test\",
      \"test\": \"test\"
    },
    \"3300\": {
      \"test\": \"test\",
      \"test\": \"test\"
    }
  },
  \"SIEcat5\": {},
  \"SIEcat6\": {},
  \"SIEcat13\": {
    \"3990\": {
      \"test\": \"test\",
      \"test\": \"test\"
    }
  }
}"

$(JSON.parse(data)).each(function(key, value) {
  console.log("test");
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

错误原因 #

你误用了jQuery的each方法：

• $(...).each()：这个方法是为遍历DOM元素集合设计的。当你把普通JavaScript对象传入$()时，jQuery会将它包装成一个仅包含该对象的伪DOM集合，因此遍历只会执行一次。
• $.each()：这是jQuery提供的通用遍历工具，支持遍历对象、数组等非DOM数据结构，才是你需要用的方法。

另外注意：原JSON字符串中存在重复的"test"键，根据JSON规范，解析器会自动保留最后一个键值对，忽略前面的重复项，这和遍历逻辑无关。

修正方案 #

替换成$.each()来遍历解析后的对象，修正后的代码如下：

// 修正JSON字符串的重复键问题，避免解析时被覆盖
var data = '{
  "SIEcat4": {
    "3001": {
      "test": "test"
    },
    "3300": {
      "test": "test"
    }
  },
  "SIEcat5": {},
  "SIEcat6": {},
  "SIEcat13": {
    "3990": {
      "test": "test"
    }
  }
}'

var parsedData = JSON.parse(data);
// 使用$.each遍历对象
$.each(parsedData, function(key, value) {
  console.log(`当前键：${key}，对应值：`, value);
});

执行后会遍历SIEcat4、SIEcat5、SIEcat6、SIEcat13四个键，控制台会输出四次日志。

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