本文介绍使用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);
});