未捕获的类型错误：无法读取未定义的属性“长度” - 无法修复/调试此答案

【问题标题】：Uncaught TypeError: Cannot read property 'length' of undefined - Cannot fix/debug this未捕获的类型错误：无法读取未定义的属性“长度” - 无法修复/调试此
【发布时间】：2016-05-14 14:44:55
【问题描述】：

http://darrenbachan.com/

http://darrenbachan.com/js/main.js

我不知道如何解决这个问题。我根本不知道 javascript 来调试或理解其他文章/线程。要让错误出现，请单击不是前两个项目之一的项目，您会在控制台中看到它。

我有项目：

'zeckoshop' : {
            'title' : 'zeckoShop',
            'description' : 'An all-in-one ecommerce platform designed to seamlessly integrate with your business operations.',
            'link' : 'http://darrenbachan.com/playground/zeckoshop/index.html',
            'images': [
                '/images/zeckoshop/zeckoshop-1.jpg'
            ],
            'tags': [
                'Web Design',
                'Web Development'
            ],
            'process-description' : 'An all-in-one ecommerce platform designed to seamlessly integrate with your business operations.',
            'process-wireframes': [
                '/images/zeckoshop/zeckoshop-1.jpg'
            ]
        },

        'diamond-hand-car-wash' : {
            'title' : 'Diamond Hand Car Wash',
            'description' : 'Feeling luxurious is only one car wash away.',
            'link' : 'http://darrenbachan.com/playground/diamond-hand-car-wash/index.html',
            'images': [
                '/images/diamond-hand-car-wash/diamond-1.jpg'
            ],
            'tags': [
                'Web Design',
                'Web Development'
            ],
            'process-description' : 'test',
            'process-wireframes': [
                '/images/zeckoshop/zeckoshop-1.jpg'
            ]
        },

        'edutravel-for-credit' : {
            'title' : 'EduTravel For Credit',
            'description' : 'Innovative travel for credit. Completely engage in your learning through exploration and discovery.',
            'link' : '',
            'images': [
                '/images/edutravel-for-credit/edu-1.jpg',
                '/images/edutravel-for-credit/edu-2.jpg',
                '/images/edutravel-for-credit/edu-3.jpg',
                '/images/edutravel-for-credit/edu-4.jpg'
            ],
            'tags': [
                'Web Design',
                'Newsletter'
            ]
        },

因为 'process-description' 和 'process-wireframes' 不在项目 'edutravel-for-credit' 中，所以会产生此错误。

拉取这个内容的代码是：

if($('#process-description').length) {
            $('#process-description').html(projectData['process-description']).show();
        } else {
            $('#process-work').hide();
        }
        $('#process-wireframes').empty('');

        $.each(projectData['process-wireframes'], function(item) {
            $('#process-wireframes').append('<div class="project-gallery"><img src='+projectData['process-wireframes'][item]+' /></div>')
        });

它将内容吐出到这个 html 中：

<div id="process-work">
    <h2 id="process-title">Process Work</h2>
    <p id="process-description"></p>
    <div id="process-wireframes"></div>
</div>

我真的不知道如何调试这个问题，并且可以使用我能获得的任何帮助。无论是在这里还是Skype会话或其他什么。我需要拼命显示这个内容。

【问题讨论】：

Can't debug "Uncaught TypeError: Cannot read property 'length' of undefined"的可能重复
你已经问过同一个问题 4 次了。请停止。如果您编辑您的问题，它会向上移动，但请不要再次发布。该帖子已被标记为关闭。
@RachelGallen 我之前编辑过我的问题。其他问题之一是关于 if/else 语句的具体问题，这导致该问题在 cmets 中仅进行了一点讨论。我承认我确实欺骗了这个问题，那是因为即使在编辑问题之后我也没有得到回应，但我这样做了，我实际上看到人们试图帮助我。很抱歉违反了网站的规则。

标签： javascript jquery html

【解决方案1】：

我没有在 chrome 上看到控制台错误。尽管控制台错误，项目是否正确加载？我想知道这是否是由于 hacky .length 调用来检查元素是否存在。但是，为了帮助您了解正在发生的事情...

你调用.length的唯一地方就是这行代码：

if($('#process-description').length) {

因此，不知何故 $('#process-description') 是未定义的。这是 jQuery 在您的 html 中检索 ID 为“process-description”的元素的方式，即使它显然在您的 HTML 中。所以要么没有加载 jQuery，在这种情况下，我预计 $ is not a function 会出现编译错误，或者元素不存在不会导致控制台错误，因此您需要向我们提供更多信息。

【讨论】：

如果您需要澄清，请发表评论。这不回答 [重复] 问题
这不是调用.length 的唯一地方。 $.each() 也在内部使用它，所以如果你使用 $.each(undefined, ...)，你会得到这个错误。
@barmar 很高兴知道，谢谢。我对 jQuery 不太熟悉

【解决方案2】：

在尝试迭代之前测试该属性是否存在。

if (projectData['process-wireframes']) {
    $.each(projectData['process-wireframes'], function(item) {
        $('#process-wireframes').append('<div class="project-gallery"><img src='+projectData['process-wireframes'][item]+' /></div>')
    });
}

发生错误是因为$.each 的代码以：

each: function( obj, callback, args ) {
    var value,
        i = 0,
        length = obj.length,
        isArray = isArraylike( obj );

当obj 未定义时，length = obj.length 行会出错。

【讨论】：