javascript - Uncaught TypeError: Cannot read property 'length' of undefined - Cannot fix/debug this

Question

http://darrenbachan.com/

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

I have no idea how to fix this. I don't know javascript at all to debug or understand other articles/threads. To get the error to appear, click onto a project that's not one of the first two and you'll see it in the console.

I have projects:

'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'
            ]
        },

Because 'process-description' and 'process-wireframes' aren't on project 'edutravel-for-credit' it creates this error.

The code that pulls this content is:

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>')
        });

It spits content into this html:

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

I literally do not know how to debug this issue and can use any help I can get. Whether it be on here or a skype session or something. I need to display this content desperately.

Answer 1

I'm not seeing the console error on chrome. Does the project load correctly despite the console error? I'm wondering if it's due to the hacky .length call to check if an element exists. However, to help you understand sort of what's going on...

The only place where you call .length is in this line of code:

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

Thus, somehow $('#process-description') is undefined. That's jQuery's way to retrieving the element in your html with ID "process-description" even though it's clearly in your HTML. So either jQuery isn't loaded, in which case I'd expect a compile error for $ is not a function or the element not to exist which wouldn't cause a console error, so you'll need to give us more information.