jQuery $.each遍历JSON字符串报错及解决方案

作者：清欢时间：2026-10-28 13:47:36浏览：581

本文介绍使用jQuery的$.each方法遍历数组时，若传入JSON字符串而非对象，Chrome控制台会抛出Cannot use 'in' operator错误。通过示例演示了该问题，并提供使用JSON.parse()或$.parseJSON()将字符串转换为对象的标准解决方案。

jQuery $.each遍历JSON字符串报错及解决方案

以下展示一个使用jQuery遍历JavaScript数组对象的简单示例。


var json = [
{"id":"1","tagName":"apple"},
{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},
{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}
];

$.each(json, function(idx, obj) {
alert(obj.tagName);
});

上述代码片段运行正常，依次弹出“apple”、“orange”等提示，符合预期效果。然而，当处理JSON字符串时会出现问题。

在下面的示例中，直接声明了一个包含单引号或双引号的JSON字符串。


var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]';

$.each(json, function(idx, obj) {
alert(obj.tagName);
});

在Chrome浏览器中，控制台会显示如下错误信息：

Uncaught TypeError: Cannot use 'in' operator to search for '156' in [{"id":"1","tagName":"apple"}...

解决方案是将JSON字符串转换为JavaScript对象。要修复此问题，可以通过标准的JSON.parse()方法或jQuery提供的$.parseJSON()方法将其转换为JavaScript对象。


var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]';

$.each(JSON.parse(json), function(idx, obj) {
alert(obj.tagName);
});

//or 

$.each($.parseJSON(json), function(idx, obj) {
alert(obj.tagName);
});

作者最新文章

JS转整数出现NaN怎么办？常见异常处理方案

2026-11-05 16:27:31

推荐几款免安装的在线JS压缩工具

2026-11-05 14:54:53

JS怎么使用JSON.stringify实现JSON格式化与缩进

2026-11-04 10:47:30

CodePen、JSFiddle 与 StackBlitz：主流 JS 在线编辑器对比

2026-11-03 21:07:49

JS字符串转数字后怎么正确判断是否为有效数值

2026-11-03 20:04:15