$.each 在 Firefox 中引发错误（e 未定义），但在 Chrome 中运行良好答案

【问题标题】：$.each raises error (e is undefined) in Firefox but works fine in Chrome$.each 在 Firefox 中引发错误（e 未定义），但在 Chrome 中运行良好
【发布时间】：2013-02-24 23:05:17
【问题描述】：

查看这个 JSFiddle：http://jsfiddle.net/cDVQP/1/

如果您同时拥有 Chrome 和 Firefox，您可以看到它在 Chrome 中按预期工作，但在 Firefox Firebug 控制台中您会收到“TypeError: e is undefined” 在 JSFiddle 上，错误显示为“TypeError: obj is undefined”

我花了几个小时寻找这个错误并试图找出它，最后放弃并来到这里。是什么原因造成的？

这里是完整的测试代码：

<html>
<body>

  <div id="x"></div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript">

    $(document).ready(function(){
      getVideos('cats');
    });

    function getVideos(query){
      var url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=2&q='+query+'&regionCode=us&type=video&fields=items(id)&key=AIzaSyCCOnozV0lEfnjfMTjpc4TFExAeIGJ6Fh0';
      $.ajax({
        url: url,
        success: function(data){
          appendVideos(data);
        }
      });
    }

    function appendVideos(data){
      // works here
      console.log(data);

      // but not in $.each
      $.each(data.items, function(i, item){
        $('#x').append(item.id.videoId + '<br>');
      });
    }

  </script>

</body>
</html>

【问题讨论】：

好吧，当我提醒 (data.items) 时，我在 FF 中未定义。

标签： javascript jquery firefox

【解决方案1】：

我看起来数据是作为字符串传递到 appendVideos 的，而不是像你想象的那样的对象。我做了一个

for(i in data) {
    alert(i+'='+data[i]);
}

它就像一个字符串。

这解决了它：

$.ajax({
    url: url,
    dataType: 'JSON',
    success: function(data){
      appendVideos(data);
    }
  });
}

【讨论】：

我们都遇到过忽略显而易见的情况。仅供参考，如果您 alert(data) 它应该返回 [Object] 如果您的数据被正确解析为 JSON 对象。
我不知道哪个浏览器更适合这里。我认为 Chrome 在这里隐式解析为 JSON 是错误的。如果我看到错误是两个浏览器，我会更快发现错误。无论如何感谢您的回答。
您期望从服务器返回的数据类型。如果没有指定，jQuery 将尝试根据响应的 MIME 类型推断它（XML MIME 类型将产生 XML，在 1.4 中 JSON 将产生一个 JavaScript 对象，在 1.4 中脚本将执行脚本，其他任何东西都会作为字符串返回）。可用的类型（以及作为第一个参数传递给成功回调的结果）是：这都是猜测。 jQuery 正在猜测，看起来 Chrome 根据内容正确地找出了 MIME 类型。我几乎从不包含数据类型。我可以开始了。

【解决方案2】：

在 jQuery 1.9.1 的第 622 行发现错误，这是由于您传递的对象是 undefined 引起的。第 622 行调用了 obj.length，由于 undefined 没有名为 length 的属性，它会抛出错误。

将dataType: 'JSON' 添加到您的$.ajax 请求将修复此错误

【讨论】：

但这更多是与浏览器有关而不是 jQuery，不是吗？

【解决方案3】：

除了其他答案，为什么不直接使用getJSON？

var url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=2&q='+query+'&regionCode=us&type=video&fields=items(id)&key=AIzaSyCCOnozV0lEfnjfMTjpc4TFExAeIGJ6Fh0';
$.getJSON(url, function(data) 
{
    appendVideos(data);
});

【讨论】：

【解决方案4】：

看起来 jQuery 在 Firefox 中不会自动将响应解析为 json，而是将其解释为字符串。

如果您将成功功能更改为以下内容，它应该可以工作：

success: function(data){
    if(typeof(data) === 'string') {
        data = JSON.parse(data);
    }

    appendVideos(data);
}

【讨论】：

在 ajax 请求中将数据类型设置为 JSON 会强制它这样做。